键盘事件
keyDown:按下任意字符键事触发,如果按着不放会重复触发此事件;
keyPress:按下任意字符键事触发,如果按着不放会重复触发此事件;
keyUp:松开时触发的事件。
本次预期是实现一个抽奖的小功能,当鼠标点击开始或者第一次按下回车键时,系统开始抽奖;鼠标点击结束或者第二次按下回车键时,停止抽奖。
实现效果:
【HTML结构】
<body>
<div id="title" class="title">开始抽奖啦!</div>
<div class="btns">
<span id="play">开 始</span>
<span id="stop">停 止</span>
</div>
</body>
【JS】
var data=['Phone5','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','50元充值卡','1000元超市购物券'],
timer=null,//定时器初始化
flag=0;
window.onload=function(){//页面加载时调用俩函数
var play=document.getElementById('play'),
stop=document.getElementById('stop');
// 开始抽奖
play.onclick=playFun;
stop.onclick=stopFun;
// 键盘事件,按下并松开按键
document.onkeyup=function(event){
event = event || window.event;
//keycode返回键盘中按下的是哪个键,13是回车键。第一次敲回车键,flag为0,执行开始,后面flag置为1,第二次敲回车。flag是1,执行结束
if(event.keyCode==13){
if(flag==0){
playFun();
flag=1;
}else{
stopFun();
flag=0;
}
}
}
}
// 获取到开始的点击操作,调用playfun函数,每隔50毫秒生成一个随机数,根据这个随机数查找到数组中的那一个,赋值给title。
function playFun(){
var title=document.getElementById('title');
var play=document.getElementById('play');
//clearInterval() 方法可取消由 setInterval() 设置的 timeout。clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
//加一个定时器之前先清除一个定时器
clearInterval(timer);
timer=setInterval(function(){
//Math.random() 生成随机数(0到1之间的浮点数)用数组长8去乘以这个浮点数,math.floor()取整0到7
var random=Math.floor(Math.random()*data.length);
title.innerHTML=data[random];
},50);//浏览器每隔50毫秒去执行这个脚本,生成随机数。
play.style.background='#999';
}
function stopFun(){
// 点击结束时,计时器停止,开始按钮背景色恢复
clearInterval(timer);
var play=document.getElementById('play');
play.style.background='#036';
}
【CSS】
*{margin:0;
padding:0;}
.title{width:400px;
height:70px;
margin:0 auto;
padding-top:30px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#F00;}
.btns{width:190px;
height:30px;
margin:0 auto;}
.btns span{display:block;
float:left;
width:80px;
height:27px;
line-height:27px;
background:#036;
border:1px solid #eee;
border-radius:7px;
margin-right:10px;
color:#FFF;
text-align:center;
font-size:14px;
font-family:"微软雅黑";
cursor:pointer;}