<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慕课网(抽奖系统)</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
.title{ 400px;height: 70px;margin: 0 auto;padding-top: 30px;text-align: center;font-size: 24px;font-weight: bold;color: #F00;}
.btns{ 220px;height: 30px;margin: 0 auto;}
.btns span{display: block;float: left; 80px;height: 25px;line-height: 25px;background: #036;border: 1px solid #eee;color: #FFF;text-align: center;border-radius: 70px;margin-right: 10px;font-size: 14px;font-family: "微软雅黑";cursor: pointer;}
</style>
</head>
<body>
<div id="title" class="title">开始抽奖啦！</div>
<div class="btns">
<span id="play">开始</span>
<span id="stop">停止</span>
</div>
<script type="text/javascript">
var data=["iphone5","iphone6s","100优惠卡","谢谢参与","Ipad","50元充值卡","再来一次","200元话费"];
var timer=null;
var flag=0;
window.onload=function(){
var title=document.getElementById('title');
var play=document.getElementById('play');
var stop=document.getElementById('stop');
//开始抽奖
play.onclick=playFun;
//停止抽奖
stop.onclick=stopFun;
//键盘事件
document.onkeyup=function(event){
event=event||window.event;
if(event.keyCode==13){
if (flag==0) {
playFun();
flag=1;
}else{
stopFun();
flag=0;
}
}
}
}
function playFun(){
var play=document.getElementById('play');
var title=document.getElementById('title');
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);
//console.log(random);
title.innerHTML=data[random];
},50);
play.style.background='#999';
}
function stopFun(){
clearInterval(timer);
var play=document.getElementById('play');
play.style.background='#036';
}
</script>
</body>
</html>