相思资源网 Design By www.200059.com
本文实例为大家分享了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="/UploadFiles/2021-04-02/eventUtil.js">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"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; } } };以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js,抽奖系统
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无慕课网题目之js实现抽奖系统功能的评论...