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.alert 弹出式复选框实现代码
Jun 15 Javascript
js动态删除div元素基本思路及实现代码
May 08 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
在使用JSON格式处理数据时应该注意的问题小结
May 20 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
React实现todolist功能
Dec 28 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 闭包详解及实例代码
2016/09/28 PHP
JS+PHP实现用户输入数字后显示最大的值及所在位置
2017/06/19 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
javascript从作用域链谈闭包
2020/07/29 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python获取某一天是星期几的方法示例
2017/01/17 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
Python实现登陆文件验证方法
2018/10/06 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
python dict如何定义
2020/09/02 Python
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
餐厅总厨求职信
2014/03/04 职场文书
机关出纳岗位职责
2014/04/03 职场文书
安全协议书范本
2014/04/21 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
音乐研修感悟
2015/11/18 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
解决 redis 无法远程连接
2022/05/15 Redis