首页 > 其他 > 详细

抽奖系统(键盘事件)

时间:2016-08-20 17:56:33      阅读:226      评论:0      收藏:0      [点我收藏+]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慕课网(抽奖系统)</title>
<style type="text/css">
*{margin: 0px;padding: 0px}
.title{width: 400px;height: 70px;margin: 0 auto;padding-top: 30px;text-align: center;font-size: 24px;font-weight: bold;color: #F00;}
.btns{width: 220px;height: 30px;margin: 0 auto;}
.btns span{display: block;float: left;width: 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>

抽奖系统(键盘事件)

原文:http://www.cnblogs.com/td-tkzc/p/5790784.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!