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


Posted in Javascript onJuly 13, 2016

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
海量经典的jQuery插件集合
Jan 12 Javascript
js function使用心得
May 10 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
May 11 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
JavaScript复制内容到剪贴板的两种常用方法
Feb 27 Javascript
js指定日期增加指定月份的实现方法
Dec 19 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
原生js仿jquery animate动画效果
Jul 13 #Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 #Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
Jul 13 #Javascript
Javascript类型系统之undefined和null浅析
Jul 13 #Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 #Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 #Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 #Javascript
You might like
解析crontab php自动运行的方法
2013/06/24 PHP
php去除HTML标签实例
2013/11/06 PHP
js 动态为textbox添加下拉框数据源的方法
2014/04/24 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
JS 实现百度搜索功能
2018/02/01 Javascript
微信小程序蓝牙连接小票打印机实例代码详解
2019/06/03 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
python list中append()与extend()用法分享
2013/03/24 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
Linux下远程连接Jupyter+pyspark部署教程
2019/06/21 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
Python中pass语句的作用是什么
2016/06/01 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
安全生产承诺书
2014/03/26 职场文书
奥巴马英文演讲稿
2014/05/15 职场文书
全运会口号
2014/06/20 职场文书
师范生见习报告范文
2014/11/03 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
公司年夜饭通知
2015/04/25 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
详解Redis复制原理
2021/06/04 Redis
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
实战Python爬虫爬取酷我音乐
2022/04/11 Python