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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
jquery显示和隐藏div特效实例
Feb 27 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
Vue可自定义tab组件用法实例
Oct 24 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
摩卡咖啡
2021/03/03 咖啡文化
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
关于js类的定义
2011/06/28 Javascript
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
微信小程序一周时间表功能实现
2019/10/17 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
Python中if __name__ == '__main__'作用解析
2015/06/29 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Python爬取12306车次信息代码详解
2020/08/12 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
硕士研究生就业推荐信
2014/05/18 职场文书
公司活动总结怎么写
2014/06/25 职场文书
教师节活动总结
2014/08/29 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
2015年个人工作总结报告
2015/04/25 职场文书
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python