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拖拽并简单保存的实现代码
Nov 28 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 Javascript
JavaScript实现留言板案例
Mar 17 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
node.js中的url.parse方法使用说明
2014/12/10 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
JS验证字符串功能
2017/02/22 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
python中关于时间和日期函数的常用计算总结(time和datatime)
2013/03/08 Python
python和shell变量互相传递的几种方法
2013/11/20 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
python爬取m3u8连接的视频
2018/02/28 Python
python逆序打印各位数字的方法
2018/06/25 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
Python pandas用法最全整理
2019/08/04 Python
python如何求100以内的素数
2020/05/27 Python
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
大专生毕业的自我评价
2014/02/06 职场文书
各类场合主持词开场白范文集锦
2019/08/16 职场文书
解决sql server 数据库,sa用户被锁定的问题
2021/06/11 SQL Server
Nginx配置https的实现
2021/11/27 Servers