js之抽奖
实现效果
描述：点击开始后，开始按键变色，且再次点击无效果，上面文字快速随机出现，点击停止，文字停止，开始按钮变回原来颜色且可点击。
实现代码**
html代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖</title>
<link rel="stylesheet" href="luck.css">
<script src="luck.js"></script>
</head>
<body>
<div id="luck_box">
<div id="top">
<span id="title">里约3日大冒险</span>
</div>
<div id="btn">
<span id="start">开始</span>
<span id="stop">停止</span>
</div>
</div>
</body>
</html>
luck.css代码如下：
*{
margin:0;
padding: 0;
}
#luck_box{
background: yellow;
}
#top{
text-align: center;
margin: 10px auto;
width: 107px;
height: 20px;
margin-top: 30px;
}
#title{
color: #e83e2f;
font-weight: 700;
width: 110px;
height: 20px;
float: left;
}
#btn{
margin: 100px auto;
width: 450px;
height: 40px;
}
#btn span{
margin-left: 50px;
margin-right: 70px;
width: 100px;
height: 30px;
background: #003466;
float: left;
color: white;
text-align: center;
line-height: 30px;
}
luck.js代码如下：
window.onload=function(){
var data = ['苹果7','话费5毛','现金1元','现金2元','谢谢参与','现金3元','现金5元'];
var timer = null;
var start = document.getElementById('start');
var stop = document.getElementById('stop');
start.onclick = function(){
var title = document.getElementById('title');
//清除上一次计时,避免频率越来越快
clearInterval(timer);
timer = setInterval(function() {
var index = Math.floor(Math.random() * data.length);
title.innerHTML = data[index];
}, 50);
start.style.background ="#999999";
};
stop.onclick = function(){
clearInterval(timer);
start.style.background = "#003466";
};
}