快捷導(dǎo)航

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

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

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

首先說明下為什么會(huì)停頓？

效果：用鍵盤控制一個(gè)div移動(dòng)

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

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

效果展示

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

2.簡單控制，解決停頓

解決方法

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

初始4個(gè)方向的值都是false，div就保持在原地不動(dòng)。

按下某個(gè)方向鍵，這個(gè)方向的值就改變?yōu)閠rue，div就會(huì)開始往這個(gè)方向移動(dòng)。

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

基本移動(dòng)，但是有挺頓的代碼

<html>
<head>
  <title>鍵盤控制div移動(dòng)，會(huì)有停頓</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

控制移動(dòng)，解決停頓的問題

<html>
<head>
  <title>鍵盤控制div移動(dòng)并且解決停頓問題</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)建各個(gè)方向條件判斷初始變量
      var left = false;
      var right = false;
      var top = false;
      var bottom = false;

      //當(dāng)按下對(duì)應(yīng)方向鍵時(shí)，對(duì)應(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è)置一個(gè)定時(shí)，時(shí)間為50左右，不要太高也不要太低
      setInterval(function(){

        //當(dāng)其中一個(gè)條件為true時(shí)，則執(zhí)行當(dāng)前函數(shù)（移動(dòng)對(duì)應(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í)行完后，所有對(duì)應(yīng)變量恢復(fù)為false，保持靜止不動(dòng)
      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)容對(duì)大家的工作或者學(xué)習(xí)能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: