慕课网题目之js实现抽奖系统功能
更新时间：2017年09月19日 08:50:55 作者：喵嘻嘻
这篇文章主要为大家详细介绍了慕课网题目之js抽奖系统功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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;
}
}
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了v3-admin-vite 整合pont的详细过程,目前后端的Admin模板使用的是v3-admin-vite,需要整合pont接口,方便前后端统一一体化开发,本文给大家介绍的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了JS访问DOM节点方法,结合实例形式较为详细的分析了JS访问DOM节点的相关函数与使用方法,需要的朋友可以参考下2016-11-11
对于数据结构“树”，想必大家都熟悉，本文，我们就再来回顾一下数据结构中的二叉树与树，并用JavaScript实现它们。下面就跟着小编一起来看下吧2017-01-01
这篇文章主要为大家详细介绍了如何利用JavaScript语言实现扯网动画效果，文中的示例代码讲解详细，对我们学习JS有一定的帮助，需要的可以参考一下2022-06-06
这篇文章主要为大家详细介绍了移动端利用H5实现压缩图片上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这个是至2009年4月比较新的判断浏览器版本的函数。js判断浏览器版本及版本号，本代码支持最新的ie7，ie8，firefox2，firefox3的判断2009-04-04
使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现，本文有利于巩固你js与css方面的知识，感兴趣的你可以了解下哦，希望本文对你有所帮助2013-01-01
这篇文章主要介绍了微信小程序封装多张图片上传api代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-12-12
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
这篇文章主要介绍了JavaScript子类用Object.getPrototypeOf去调用父类方法。需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
这篇文章主要介绍了只有 20 行的 JavaScript 模板引擎,结合实例形式分析了JavaScript 模板引擎实现方法与相关注意事项,需要的朋友可以参考下2020-05-05
最新评论