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>

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

赞 (0)

相关推荐

  • js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS

    绝对值得看的来篇,哈哈.本人亲自完成,有错误请大家指出: 现在的手机完美支持html5,所以如果手机端想要做个抽奖模块的话,用刮刮卡抽奖效果,相信这个互动体验是非常棒的 ​ps:由于本人没有wp8系统的手机,所以没法兼容wp8系统的,目前完美兼容android,IOS 如果要在pc浏览的话,得改下js,目前支持谷歌,火狐,ie>=10,如果网友想要的话我就去写个 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html lang="en"&g

  • javascript HTML5 Canvas实现圆盘抽奖功能

    javascript HTML5 Canvas实现圆盘抽奖功能

    我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等.这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能.老规矩,先看下效果图吧: 再来看看Canvas的几个主要api: 全部源代码如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&qu

  • js抽奖实现随机抽奖代码效果

    随机抽取,简单代码. 复制代码 代码如下: <html> <title>随机抽奖程序</title> <head><meta http-equiv=Content-Type content="text/html; charset=gb2312"> </head> <body> <script type="text/javascript"> var alldata = &q

  • js实现可键盘控制的简单抽奖程序

    js实现可键盘控制的简单抽奖程序

    本文实例为大家分享了js抽奖程序的编写代码,以及编写注意事项,感兴趣的小伙伴们可以参考一下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单抽奖(可用键盘)</title> <style> *{margin:0;padding:0;} .box{width: 400px;heigh

  • js实现简易的单数字随机抽奖（0-9）

    js实现简易的单数字随机抽奖（0-9）

    本文分享的网页特效是一个可以控制开始停止的数字抽奖游戏,类似很多电视上那种数字抽奖游戏,下面就是我分享的全部代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>简易的单数字随机抽奖,抽取随机数的js特效代码</title> <

  • 基于JavaScript实现简单的随机抽奖小程序

    对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够经可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做.本人对javascript的研究不深,平时主要用于网站开发中对来自客户端的数据进行有效性判断(基于安全性的考虑,安全性要求高的网站尽量使用服务器端语言对数据有效

  • 基于javascript实现简单的抽奖系统

    基于javascript实现简单的抽奖系统

    本文实例为大家分享了js实现简单的抽奖系统,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="gb2312"> <title>抽奖活动</title> <style> *{ margin:0;padding:0; } #title{ color:red;text-align:center;margi

  • js组件SlotMachine实现图片切换效果制作抽奖系统

    js组件SlotMachine实现图片切换效果制作抽奖系统

    前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的"SlotMachine组件",浏览一遍下来,勾起了小时候满满的回忆. 下面就带着大家来看看这么一个神奇的组件--SlotMachine吧. 一.组件预览 先来一发简单的效果压压惊 觉得太简单?别急,好戏在后头,试试手气先. 什么?还没达到想要的效果,好!下面,真实效果来一发. 点击了好长时间,都没有中奖,难怪小时候怎么都赢不了呢.不信邪,继续点击开始,终于有一次中奖的了,真心不容易. 还有我们年终抽奖效果,开始!停止! 二.代

  • JS模拟抽奖序效果实现代码

    JS模拟抽奖效果 .a1{ position:relative; font-family:Verdana; font-size:20px; color:#888888; } function lotto(){ if (!document.all&&!document.layers) return for (j=1; j  "+Nos+""); document.layers.layer1.document.close(); } T=setTimeout('lo

  • JS实现转动随机数抽奖的特效代码

    JS实现转动随机数抽奖的特效代码

    大家都玩过抽奖游戏,或者梦想抽到大奖吧,但是有没有想过抽奖游戏是怎么实现的呐?今天就给大家分享一款转动随机数抽奖的JS特效代码. 实现代码如下 <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script src="http://code.jquery.com

随机推荐