js實現的使用鍵盤操作div位置程式碼例項

螞蟻小編發表於2017-03-26
JS

通過鍵盤操作頁面中元素的位置，這是常見的功能，比如通過鍵盤的上下左右鍵來調整元素的位置，當然也可以是其他鍵，下面就通過程式碼例項介紹一下如何實現此功能，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> <html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<script type="text/javascript"> 
window.onload=function(){ 
  var obj=document.getElementById("thediv");
  var range=1; 
  var toLeft=toRight=toTop=toBottom=false;
  var move=null;
  document.onkeydown=function(event){ 
    var event=event||window.event; 
    switch(event.keyCode){
      case 37:toLeft=true;break;
      case 38:toTop=true;break; 
      case 39:toRight=true;break; 
      case 40:toBottom=true;break; 
    } 
    move=setInterval(function(){
      if(toLeft){ 
        obj.style.left=parseInt(obj.offsetLeft-range)+"px";
      } 
      if(toRight){ 
        obj.style.left=obj.offsetLeft+range+"px"; 
      } 
      if(toTop){ 
        obj.style.top=obj.offsetTop-range+"px"; 
      } 
      if(toBottom){ 
        obj.style.top=obj.offsetTop+range+"px"; 
      } 
    },10); 
  }; 
  document.onkeyup=function(event){ 
    clearInterval(move);
    switch(event.keyCode){ 
      case 37:toLeft=false;break;
      case 38:toTop=false;break; 
      case 39:toRight=false;break; 
      case 40:toBottom=false;break; 
    } 
  }; 
};
</script> 
</head> 
<body>
<div style="width:50px;height:50px;background-color:green;position:absolute;" id="thediv"></div>
</body> 
</html>

上面的程式碼實現通過上下左右方向鍵控制元素位置的效果，下面介紹一下實現過程。

一.程式碼註釋:

1.window.onload=function(){}，當文件載入完畢再去執行函式中的程式碼。

2.var obj=document.getElementById("thediv")，獲取div元素。

3.var range=1，宣告一個變數並賦值1，這個是規定每執行一次函式，位移變化的幅度，單位是畫素。

4.var toLeft=toRight=toTop=toBottom=false，宣告四個變數，並賦初值為false，用來標識對應的方向鍵是否被按下。

5.document.onkeydown=function(event){}，為document文件註冊onkeydown事件處理函式，也就是鍵盤按鍵事件處理函式，函式的引數為事件物件。

6.var event=event||window.event，獲取事件物件，這裡做了相容性處理。

7.switch(event.keyCode){}，一個switch語句，獲取按鍵碼，根據不同的按鍵碼，設定方向鍵標識變數的值。

8.move=setInterval(function(){},10),定時器函式，每隔10毫秒指定一次函式，此函式可以根據按下的哪個方向鍵設定相應的值，比如按右方向鍵，可以使div的left屬性值遞增。

9.document.onkeyup=function(event){}，為document註冊onkeyup事件處理函式，也就是當案件鬆開的時候，會結束定時器函式的執行，並將響應的按鍵標識設定為false。

二.相關閱讀:

1.onkeydown事件可以參閱javascript keydown 事件一章節。 

2.onkeyup事件可以參閱javascript keyup 事件一章節。 

3.var event=event||window.event可以參閱var ev=window.event||ev的作用是什麼一章節。

4.switch語句可以參閱javascript switch 語句一章節。 

5.keyCode可以參閱js的鍵盤按鍵keyCode屬性值對應表一章節。 

6.setInterval()函式可以參閱setInterval()函式用法詳解一章節。 

7.clearInterval()函式可以參閱window.clearInterval()一章節。 

相關文章