首先說明下為什么會停頓？
效果 ：用鍵盤控制一個div移動
當按下一個方向鍵不放，div會先停頓一下，然后才開始持續移動。
原因：系統要區分用戶是否連續輸入，第一個到第二個之間有一個停頓時間
注：了解原因才能解決問題
效果展示
1.簡單控制，但是有停頓
2.簡單控制，解決停頓
解決方法
方法 ：先開一個定時器，讓div一直處于（往4個方向）準備移動的狀態
初始4個方向的值都是false，div就保持在原地不動。
按下某個方向鍵，這個方向的值就改變為true，div就會開始往這個方向移動。
松開方向鍵，這個方向的值就改變為false , 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"> /*設置div樣式*/ div{ width:100px; height:100px; background: #68affc; position:absolute; left:100px; top:100px; } </style> <script> //當頁面加載完后 window.onload = function(){ //獲取Div元素 var oDiv = document.getElementById("div1"); //創建各個方向條件判斷初始變量 var left = false; var right = false; var top = false; var bottom = false; //當按下對應方向鍵時，對應變量為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; } }; //設置一個定時，時間為50左右，不要太高也不要太低 setInterval(function(){ //當其中一個條件為true時，則執行當前函數（移動對應方向） 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); //執行完后，所有對應變量恢復為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>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的工作或者學習能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
