您的位置：首页 > 其它

键盘事件模拟抽奖

2016-12-17 16:07 351 查看

键盘事件

KeyDown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。

KeyPress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。

KeyUp：当用户释放键盘上的键时触发。
EVEVT对象的keyCode属性用于得到键盘对应键的键码值

图片分别为刚进入页面，正在抽奖，点击停止后

html

<!doctype html>
<html>
<head>
<title>抽奖</title>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="title" class="title">开始抽奖啦！</div>
<div class="btns">
<span id="play">开始</span>
<span id="stop">停止</span>
</div>
</body>
</html>script.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;
//console.log(event.keyCode);//打印键码
if(event.keyCode==13){//回车
if(flag==0){
playFun();
flag=1;
}else{
stopFun();
flag=0;
}
}
}
}

function playFun(){
var title=document.getElementById('title');
var play=document.getElementById('play');
clearInterval(timer);//清除定时器
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);
title.innerHTML=data[random];
},50);
play.style.background='#999';
}

function stopFun(){
clearInterval(timer);
var play=document.getElementById('play');
play.style.background='#036';
}

style.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;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航