DOM事件探祕之三-鍵盤事件

鍵盤事件

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;}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章