javascript实现可键盘控制的抽奖系统


Posted in Javascript onMarch 10, 2016

制作一个简易的抽奖系统!欢迎大家学习!

javascript实现可键盘控制的抽奖系统

JS原理:建立一个数组用来存储抽奖内容,例如 iphone6 等,当点击开始的时候,开启定时器,产生一个随机数,把对应文本的innerHTML改成数组所对应的内容。

如果想让某个抽奖几率变高,可以让数组中某个值重复次数多点。接下来看代码。、

JavaScript代码

window.onload = function(){
  var data = [
    "iphone 6s plus",
    "苹果Mac 笔记本",
    "美的洗衣机",
    "凌美钢笔",
    "谢谢参与",
    "索尼入耳式耳机",
    "雷柏机械键盘",
    "《javaScript高级程序设计》",
    "精美保温杯",
    "维尼小熊一只",
    "500元中国石化加油卡",
    "爱奇艺年费会员",
    "iPad mini",
    "32G U盘",
  ];
  var bStop = true;
  var timer = null;
  var btns = document.getElementById('btns').getElementsByTagName('span');
  var text = document.getElementById('text');

  btns[0].onclick = start;
  btns[1].onclick = stop;

  document.onkeyup = function(event){
    event = event||window.event;
    if(event.keyCode==13){
      if(bStop){
        start();
      }else {
        stop();
      }
    }
  }

  function start(){
    clearInterval(timer);
    timer = setInterval(function(){
      var r = Math.floor(Math.random()*data.length);
      text.innerHTML = data[r];
    },20);
    btns[0].style.background = '#666';
    bStop = false;
  }

  function stop(){
    clearInterval(timer);
    btns[0].style.background = 'blue';
      bStop = true;
    
  }
}

html css 代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>抽奖啦</title>
  <style>
    * {
      margin: 0;
      padding:0;
    }
    #container {
      width: 500px;
      height: 200px;
      margin: 100px auto;
      background: red;
      position: relative;
      padding-top: 20px;
    }
    #container p {
      position: absolute;
      bottom: 4px;
      left: 30px;
    }
    #btns {
      position: absolute;
      left: 118px;
      bottom: 30px;
    }
    #container h1 {
      color: #fff;
      text-align: center;
    }
    #btn-start,#btn-stop {
      width: 100px;
      height: 60px;
      background: blue;
      text-align: center;
      line-height: 60px;
      font-size: 20px;
      display: inline-block;
      color: #fff;
      margin-right: 60px;
      border-radius: 10px;
      cursor: pointer;
    }
  </style>
  <script src="index.js"></script>
</head>
<body>
  <div id="container">
    <h1 id="text">iphone 6s plus</h1>
    <p>小提示:您可以按下Enter键来控制开始暂停,祝您中大奖哟</p>
    <div id="btns">
      <span id="btn-start">开始</span>
      <span id="btn-stop">停止</span>
    </div>
  </div>
</body>
</html>

希望本文所述对大家的学习有所帮助,轻松实现抽奖系统。

Javascript 相关文章推荐
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
Javascript浅谈之this
Dec 17 Javascript
jQuery实现鼠标划过展示大图的方法
Mar 09 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
jQuery添加和删除指定标签的方法
Dec 16 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
Vue异步组件使用详解
Apr 08 Javascript
JS组件系列之JS组件封装过程详解
Apr 28 Javascript
Angular2实现组件交互的方法分析
Dec 19 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
基于javascript制作微信聊天面板
Aug 09 #Javascript
关于Bootstrap弹出框无法调用问题的解决办法
Mar 10 #Javascript
TypeScript Type Innference(类型判断)
Mar 10 #Javascript
JavaScript File分段上传
Mar 10 #Javascript
ES6中非常实用的新特性介绍
Mar 10 #Javascript
ES6的新特性概览
Mar 10 #Javascript
JavaScript字符串常用的方法
Mar 10 #Javascript
You might like
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
浅析php原型模式
2014/11/25 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
优秀js开源框架-jQuery使用手册(1)
2007/03/10 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
javascript中万恶的function实例分析
2011/05/25 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
JS文本框默认值处理详解
2013/07/10 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
webpack多页面开发实践
2017/12/18 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
2019/04/28 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Django中使用Celery的方法示例
2018/11/29 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
办公室秘书自我鉴定
2014/01/18 职场文书
社区七一党员活动方案
2014/01/25 职场文书
黄河的主人教学反思
2014/02/07 职场文书
小学教学随笔感言
2014/02/26 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
农业生产宣传标语
2014/10/08 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
建国大业电影观后感
2015/06/01 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android