鍵盤事件
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;}