原生js實現(xiàn)鍵盤控制div移動且解決停頓問題

更新時間：2016年12月05日 08:41:22 投稿：daisy

這篇文章主要給大家介紹了如何利用原生js實現(xiàn)鍵盤控制div移動，并且解決在移動過程中的停頓問題，文中給出了詳細(xì)的示例代碼，相信對大家的理解和學(xué)習(xí)很有幫助，下面跟著小編一起來看看吧。

首先說明下為什么會停頓？

效果：用鍵盤控制一個div移動

當(dāng)按下一個方向鍵不放，div會先停頓一下，然后才開始持續(xù)移動。

原因：系統(tǒng)要區(qū)分用戶是否連續(xù)輸入，第一個到第二個之間有一個停頓時間
注：了解原因才能解決問題

效果展示

1.簡單控制，但是有停頓

2.簡單控制，解決停頓

解決方法

方法：先開一個定時器，讓div一直處于（往4個方向）準(zhǔn)備移動的狀態(tài)

初始4個方向的值都是false，div就保持在原地不動。

按下某個方向鍵，這個方向的值就改變?yōu)閠rue，div就會開始往這個方向移動。

松開方向鍵，這個方向的值就改變?yōu)閒alse , div就停止這個方向移動了。

基本移動，但是有挺頓的代碼

<html>
<head>
  <title>鍵盤控制div移動，會有停頓</title>
  <meta charset="utf-8" />
  <style type="text/css">
    #div1{
        width:100px;
        height:100px;
        background:greenyellow;
        position:absolute;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var oDiv = document.getElementById("div1");
      document.onkeydown = function(ev){
        var ev = ev || event;
        var keyCode = ev.keyCode;
        switch(keyCode){
          case 37: oDiv.style.left = oDiv.offsetLeft-10+"px";break;
          case 38: oDiv.style.top = oDiv.offsetTop-10+"px";break;
          case 39: oDiv.style.left = oDiv.offsetLeft+10+"px";break;
          case 40: oDiv.style.top = oDiv.offsetTop+10+"px";break;
        }
      }

    }
  </script>
</head>
<body>
<div id="div1"></div>
</body>
</html

控制移動，解決停頓的問題

<html>
<head>
  <title>鍵盤控制div移動并且解決停頓問題</title>
  <meta charset="utf-8" />
  <style type="text/css">

    /*設(shè)置div樣式*/
    div{
      width:100px;
      height:100px;
      background: #68affc;
      position:absolute;
      left:100px;
      top:100px;
    }
  </style>
  <script>

    //當(dāng)頁面加載完后
    window.onload = function(){

      //獲取Div元素
      var oDiv = document.getElementById("div1");

      //創(chuàng)建各個方向條件判斷初始變量
      var left = false;
      var right = false;
      var top = false;
      var bottom = false;

      //當(dāng)按下對應(yīng)方向鍵時，對應(yīng)變量為true
      document.onkeydown = function(ev){
        var oEvent = ev || event;
        var keyCode = oEvent.keyCode;
        switch(keyCode){
          case 37:
            left=true;
            break;
          case 38:
            top=true;
            break;
          case 39:
            right=true;
            break;
          case 40:
            bottom=true;
            break;
        }
      };

      //設(shè)置一個定時，時間為50左右，不要太高也不要太低
      setInterval(function(){

        //當(dāng)其中一個條件為true時，則執(zhí)行當(dāng)前函數(shù)（移動對應(yīng)方向）
        if(left){
          oDiv.style.left = oDiv.offsetLeft-10+"px";
        }else if(top){
          oDiv.style.top = oDiv.offsetTop-10+"px";
        }else if(right){
          oDiv.style.left = oDiv.offsetLeft+10+"px";
        }else if(bottom){
          oDiv.style.top = oDiv.offsetTop+10+"px";
        }
      },50);

      //執(zhí)行完后，所有對應(yīng)變量恢復(fù)為false，保持靜止不動
      document.onkeyup = function(ev){
        var oEvent = ev || event;
        var keyCode = oEvent.keyCode;

        switch(keyCode){
          case 37:
            left=false;
            break;
          case 38:
            top=false;
            break;
          case 39:
            right=false;
            break;
          case 40:
            bottom=false;
            break;
        }
      }
    }
  </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的工作或者學(xué)習(xí)能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: