当前位置：首页 > 资讯 > 技术文档

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

时间：2021-02-27 03:43 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例为大家分享了js抽奖程序的编写代码，以及编写注意事项，感兴趣的小伙伴们可以参考一下 [img]http://files.jb51.net/file_images/article/201607/2016713143328688.gif?2016613143337[/img] 代码：

<!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>

[b]注意点：[/b] 1.随机数，取数组的其中一个；取0-n之间：Math.random()*(n+1) 2.定时器，开始抽奖时要停止前面的一次抽奖，不然会定时器重叠 3.按键操作，要判断是抽奖进行中，还是未开始，所有设置了变量 flag 想要学习更多关于javascript抽奖功能，请参考此专题：[url=http://www.1sucai.cn/Special/159.htm]javascript实现抽奖功能[/url] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：JavaScript使用Math.Min返回两个数中较小数的方法
下一篇：在JS中a标签加入单击事件屏蔽href跳转页面

资讯排行榜
更多>>