代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单抽奖(可用键盘)</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;margin:50px auto;background: red} .title{color: #fff;font-size: 30px;font-weight:700px;padding: 50px 0;text-align: center;height:40px;} .btm{text-align: center;padding:20px 0;} .btm a{display: inline-block;width: 120px;height:60px;line-height: 60px;background: #FEF097;margin:0 10px;text-decoration: none;} </style> <script> var data=['Iphone','Ipad','笔记本','相机','谢谢参与','充值卡','购物券'], timer=null,//定时器 flag=0;//阻止多次回车 window.onload=function(){ var play=document.getElementById('play'), stop=document.getElementById('stop'); // 开始抽奖 play.onclick=playFun; stop.onclick=stopFun; // 键盘事件 document.onkeyup=function(event){ event = event || window.event; // 回车键的code值:13 if(event.keyCode==13){ if(flag==0){ playFun(); flag=1; }else{ stopFun(); flag=0; } } } function playFun(){ var title=document.getElementById('title'); var play=document.getElementById('play'); clearInterval(timer); timer=setInterval(function(){ var random=Math.floor(Math.random()*data.length); title.innerHTML=data[random]; },60); play.style.background='#999'; } function stopFun(){ clearInterval(timer); var play=document.getElementById('play'); play.style.background='#FEF097'; } } </script> </head> <body> <div> <div>淘家趣抽奖</div> <div> <a href="javascript:;">开始</a> <a href="javascript:;">停止</a> </div> </div> </body> </html>
注意点:
1.随机数,取数组的其中一个;取0-n之间:Math.random()*(n+1)
2.定时器,开始抽奖时要停止前面的一次抽奖,不然会定时器重叠
3.按键操作,要判断是抽奖进行中,还是未开始,所有设置了变量 flag