这是一个简易抽奖的小模块,用到了多种触发事件,涉及到了一些兼容性问题,定时器的使用以及定时器的清除(不使定时器累加), event.keyCode属性的运用,flag的建立控制按下同一个键实现不同的效果,还有一些数组知识的运用;
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-1.8.3.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
#div1{
width: 250px;
margin: 100px auto;
border: 2px solid pink;
}
#div2{
width: 240px;
height: 40px;
padding-top: 10px;
text-align: center;
font-size:24px;
font-weight: bold;
color:#f00;
}
#div3 span{
display: inline-block;
width: 80px;
margin: 20px;
border-radius: 10px;
background: pink;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">开始抽奖</div>
<div id="div3">
<span id="play">开始</span>
<span id="stop">停止</span>
</div>
</div>
<script>
var eles=["苹果7","MacBook","1000元购物卡","500元购物卡","尼康相机","小米手环","三星Note7","航空母舰"];
var timer,
flag=0;
window.οnlοad=function(){
var play=document.getElementById("play"),
stop=document.getElementById("stop");
play.οnclick=s4_play;
stop.οnclick=s4_stop;
document.οnkeyup=s4_play_keyup;
}
function s4_play(){
clearInterval(timer);
var play=document.getElementById("play"),
num=Math.floor(Math.random()*8);
timer=setInterval(s4_cj,50);
play.style.background="#999";
}
function s4_cj(){
var div2=document.getElementById("div2");
var num=Math.floor(Math.random()*8);
var goods=eles[num];
div2.innerHTML=goods;
// console.log(goods);
}
function s4_stop(){
clearInterval(timer);
play.style.background="pink";
}
function s4_play_keyup(event){
event=event||window.event;
console.log(event.keyCode);
if(event.keyCode==13){
if(flag==0){
s4_play();
flag=1;
}else if(flag==1){
s4_stop();
flag=0;
}
}
}
</script>
</body>
</html>
之前在代码的最后部分,写的是如下代码,发现没有效果 ,后来经过检查,发现是里面的s4_play和s4_stop函数没有加上()导致;
所以,记住,单独引用一个函数的时候要加上(),x.οnclick=qw等这样引用的时候是不需要加上()的;
if(flag==0){
s4_play;
flag=1;
}else if(flag==1){
s4_stop;
flag=0;
}