简易抽奖系统的实现,键盘控制
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易抽奖系统的实现,键盘控制相关的知识，希望对你有一定的参考价值。
一个简易的抽奖系统！
JS原理：建立一个数组用来存储抽奖内容，例如 iphone6 等，当点击开始的时候，开启定时器,产生一个随机数，把对应文本的innerhtml改成数组所对应的内容。
如果想让某个抽奖几率变高，可以让数组中某个值重复次数多点。接下来看代码。、
1 window.onload = function(){ 2 var data = [ 3 "iphone 6s plus", 4 "苹果Mac 笔记本", 5 "美的洗衣机", 6 "凌美钢笔", 7 "谢谢参与", 8 "索尼入耳式耳机", 9 "雷柏机械键盘", 10 "《javaScript高级程序设计》", 11 "精美保温杯", 12 "维尼小熊一只", 13 "500元中国石化加油卡", 14 "爱奇艺年费会员", 15 "iPad mini", 16 "32G U盘", 17 ]; 18 var bStop = true; 19 var timer = null; 20 var btns = document.getElementById(‘btns‘).getElementsByTagName(‘span‘); 21 var text = document.getElementById(‘text‘); 22 23 btns[0].onclick = start; 24 btns[1].onclick = stop; 25 26 document.onkeyup = function(event){ 27 event = event||window.event; 28 if(event.keyCode==13){ 29 if(bStop){ 30 start(); 31 }else { 32 stop(); 33 } 34 } 35 } 36 37 function start(){ 38 clearInterval(timer); 39 timer = setInterval(function(){ 40 var r = Math.floor(Math.random()*data.length); 41 text.innerHTML = data[r]; 42 },20); 43 btns[0].style.background = ‘#666‘; 44 bStop = false; 45 } 46 47 function stop(){ 48 clearInterval(timer); 49 btns[0].style.background = ‘blue‘; 50 bStop = true; 51 52 } 53 }
html css 代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>抽奖啦</title> 6 <style> 7 * { 8 margin: 0; 9 padding:0; 10 } 11 #container { 12 width: 500px; 13 height: 200px; 14 margin: 100px auto; 15 background: red; 16 position: relative; 17 padding-top: 20px; 18 } 19 #container p { 20 position: absolute; 21 bottom: 4px; 22 left: 30px; 23 } 24 #btns { 25 position: absolute; 26 left: 118px; 27 bottom: 30px; 28 } 29 #container h1 { 30 color: #fff; 31 text-align: center; 32 } 33 #btn-start,#btn-stop { 34 width: 100px; 35 height: 60px; 36 background: blue; 37 text-align: center; 38 line-height: 60px; 39 font-size: 20px; 40 display: inline-block; 41 color: #fff; 42 margin-right: 60px; 43 border-radius: 10px; 44 cursor: pointer; 45 } 46 </style> 47 <script src="index.js"></script> 48 </head> 49 <body> 50 <div id="container"> 51 <h1 id="text">iphone 6s plus</h1> 52 <p>小提示:您可以按下Enter键来控制开始暂停,祝您中大奖哟</p> 53 <div id="btns"> 54 <span id="btn-start">开始</span> 55 <span id="btn-stop">停止</span> 56 </div> 57 </div> 58 </body> 59 </html>
以上是关于简易抽奖系统的实现,键盘控制的主要内容，如果未能解决你的问题，请参考以下文章