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

2019-11-20 10:25:21

字体：大中小

来源：转载

供稿：网友

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

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制作微信聊天面板