js实现可键盘控制的简单抽奖程序

2019-11-20 09:29:32

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js抽奖程序的编写代码，以及编写注意事项，感兴趣的小伙伴们可以参考一下

代码：

<!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 class="box">    <div class="title" id="title">淘家趣抽奖</div>    <div class="btm">      <a href="javascript:;" id="play">开始</a>      <a href="javascript:;" id="stop">停止</a>    </div>  </div></body></html>

注意点：
1.随机数，取数组的其中一个；取0-n之间：Math.random()*(n+1)
2.定时器，开始抽奖时要停止前面的一次抽奖，不然会定时器重叠
3.按键操作，要判断是抽奖进行中，还是未开始，所有设置了变量 flag

想要学习更多关于javascript抽奖功能，请参考此专题：javascript实现抽奖功能

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS中如何比较两个Json对象是否相等实例代码

下一篇：原生js仿jquery animate动画效果