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 相关文章推荐
javascript调试过程中找不到哪里出错的可能原因
Dec 16 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
Vue.js每天必学之组件与组件间的通信
Sep 08 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
Angular5中状态管理的实现
Sep 03 Javascript
vue-router懒加载速度缓慢问题及解决方法
Nov 25 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
基于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
PHP实现格式化文件数据大小显示的方法
2015/01/03 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
js 调整select 位置的函数
2008/02/21 Javascript
简明json介绍
2008/09/28 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
不定义JQuery插件 不要说会JQuery
2016/03/07 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
JS搜狐面试题分析
2016/12/16 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
2016/12/21 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
2017/04/07 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
javascript获取指定区间范围随机数的方法
2017/09/08 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python中itertools模块用法详解
2014/09/25 Python
python多进程使用及线程池的使用方法代码详解
2018/10/24 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
基于python实现高速视频传输程序
2019/05/05 Python
python统计字符的个数代码实例
2020/02/07 Python
Python调用C/C++的方法解析
2020/08/05 Python
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
自主招生自荐信
2013/12/08 职场文书
情人节寄语大全
2014/04/11 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
工作自我评价范文
2015/03/05 职场文书
合作意向书范本
2019/04/17 职场文书
如何撰写创业策划书
2019/06/27 职场文书