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实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
跟我学习javascript的隐式强制转换
Nov 16 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
vue系列之动态路由详解【原创】
Sep 10 Javascript
jQuery中的for循环var与let的区别
Apr 21 jQuery
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
vue项目中将element-ui table表格写成组件的实现代码
Jun 12 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
详解JS数组方法
Nov 20 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
javascript 对象定义方法 简单易学
2009/03/22 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
AngularJS API之copy深拷贝详解及实例
2016/09/14 Javascript
BootStrap表单控件之文本域textarea
2017/05/23 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
[01:00:53]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Secret
2018/03/30 DOTA
本地文件上传到七牛云服务器示例(七牛云存储)
2014/01/11 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
使用Python实现将list中的每一项的首字母大写
2019/06/11 Python
python多线程http压力测试脚本
2019/06/25 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python计算无向图节点度的实例代码
2019/11/22 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
Django操作session 的方法
2020/03/09 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
给排水工程师岗位职责
2013/11/21 职场文书
实习生个人的自我评价
2013/12/08 职场文书
家具促销活动方案
2014/02/16 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
聘任书的格式及模板
2019/10/28 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python