js实现可键盘控制的简单抽奖程序
来源: 阅读:877 次 日期:2016-07-27 15:58:35
温馨提示: 小编为您整理了“js实现可键盘控制的简单抽奖程序”,方便广大网友查阅!

本文实例为大家分享了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 

以上就是本文的全部内容,希望对大家的学习有所帮助

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map