学习知识题目之js实现抽奖系统功能
程序员文章站
2024-01-17 14:59:22
本文实例为大家分享了js实现抽奖系统功能的具体代码,供大家参考,具体内容如下
要求实现功能:
1.点击左侧按键,开始抽奖,点击右侧按键,停止抽奖;
2...
本文实例为大家分享了js实现抽奖系统功能的具体代码,供大家参考,具体内容如下
要求实现功能:
1.点击左侧按键,开始抽奖,点击右侧按键,停止抽奖;
2.敲击回车键,开始抽奖,再次敲击回车键,停止抽奖;
3.开始抽奖后,左侧按钮变色;
html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>抽奖</title> <link rel="stylesheet" href="style.css"> <script src="eventutil.js"></script> <script src="js.js"></script> </head> <body> <div class="box"> <div id="header">开始抽奖啦!</div> <div id="btn"> <span id="start">开始</span> <span id="stop">结束</span> </div> </div> </body> </html>
css:
body{ margin: 0; padding: 0; } .box{ width: 400px; height: 200px; border: 1px solid #0c4e7c; margin: 0 auto; } #header{ color:darkred; font-size: 24px; text-align: center; width: 400px; height: 60px; line-height: 60px; } #btn{ width: 200px; overflow: hidden; margin: 30px auto 0; } #btn span{ cursor: pointer; border: 2px solid #a09a09; border-radius: 7px; margin-right: 10px; color: #000; display: inline-block; height: 40px; width: 80px; background-color: #f2ec55; line-height: 40px; text-align: center; }
javascript:
js.js: var date = ["谢谢参与", "谢谢参与", "谢谢参与", "50元话费", "ipad", "佳能相机", "苹果手机", "3ds", "switch", "1000元超市购物卡"]; var timer = null; var flag = 0; window.onload = function () { // var header = document.getelementbyid("header");优化前 var start = document.getelementbyid("start"); var stop = document.getelementbyid("stop"); //鼠标抽奖 eventutil.addhandler(start, "click", getstart); eventutil.addhandler(stop, "click", getstop); //键盘抽奖; document.onkeyup = function (event) { var e = event || window.event; //检测按键键值; // console.log(e.keycode); if (e.keycode === 13) { if (flag === 0) { getstart(); flag = 1; } else { getstop(); flag = 0; } } }; function getstart() { clearinterval(timer); var header = document.getelementbyid("header");//优化后 timer = setinterval(function () { //代码优化前 //var x = parseint(math.random()*10); var random = math.floor(math.random() * date.length); header.innerhtml = date[random]; }, 50); start.style.backgroundcolor = "#999"; flag = 1; } function getstop() { clearinterval(timer); start.style.backgroundcolor = "#f2ec55"; flag = 0; } };
eventutil.js
var eventutil = { getevent:function (event) { return event?event:window.event; }, gettype: function (event) { return event.type; }, gettarget:function (event) { return event.target||event.srcelement; }, //阻止冒泡 stoppropagation:function (event) { if(event.stoppropagation){ event.stoppropagation(); }else { event.cancelbubble=true; } }, //阻止事件默认行为; preventdefault:function(event){ if(event.preventdefault){ event.preventdefault(); }else { event.returnvalue = false; } }, //添加具柄; addhandler: function (element, type, handler) { if (element.ç) { element.addeventlistener(type, handler, false); } else if (element.attachevent) { element.attachevent("on" + type, handler); } else { element["on" + type] = handler; } }, //删除具柄; removehandler: function (element, type, handler) { if (element.removeeventlistener) { element.removeeventlistener(type, handler, false); } else if (element.detachevent) { element.detachevent("on" + type, handler); } else { element["on" + type] = null; } } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。