您的位置：首页 > Web前端 > JavaScript

js抽奖系统

2015-12-27 18:58 696 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽象系统</title>
<style type="text/css">
div{
margin:20px auto;
font-size: 20px;
color:#f00;
font-weight: bold;
font-family: "微软雅黑";
text-align: center;
}
.btnwrap{
width:200px;
margin: 0 auto;
}
button{
width:80px;
height:35px;
font-size: 16px;
border:1px solid #fff;
border-radius:8px;
background-color: #3983de;
color:#fff;
margin:0 10px;
float:left;
outline: none;
}
.Over{
background-color: #888;
}
</style>
</head>
<body>
<div id="info">开始抽奖</div>
<div class="btnwrap">
<button id="start">开 始</button>
<button id="stop">停 止</button>
</div>
<script type="text/javascript">
/**
* 思路：1、首先定义变量。
* 2、定义一个数组，存放抽奖数据
* 3、定义一个函数。
* @type {[type]}
*/
(function(d){
var info = d.getElementById('info'),
start= d.getElementById('start'),
stop = d.getElementById('stop'),
arr = ['笔记本','佳能相机','3000元现金','惠普笔记本','3000元','ipone5'],
time = null;
function move(){
var l = arr.length;
var random = Math.floor(Math.random()*l);
info.innerHTML = arr[random];
}
start.onclick = function(){
clearInterval(time);
//不能定义var。
time = setInterval(move,100);
start.classList.add('Over');
}
stop.onclick = function(){
clearInterval(time);
start.classList.remove('Over');
alert(info.innerHTML);
}
})(document)
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航