首先說(shuō)明下為什么會(huì)停頓？
效果 ：用鍵盤(pán)控制一個(gè)div移動(dòng)
當(dāng)按下一個(gè)方向鍵不放，div會(huì)先停頓一下，然后才開(kāi)始持續(xù)移動(dòng)。
原因：系統(tǒng)要區(qū)分用戶(hù)是否連續(xù)輸入，第一個(gè)到第二個(gè)之間有一個(gè)停頓時(shí)間
注：了解原因才能解決問(wèn)題
效果展示
1.簡(jiǎn)單控制，但是有停頓
2.簡(jiǎn)單控制，解決停頓
解決方法
方法 ：先開(kāi)一個(gè)定時(shí)器，讓div一直處于（往4個(gè)方向）準(zhǔn)備移動(dòng)的狀態(tài)
初始4個(gè)方向的值都是false，div就保持在原地不動(dòng)。
按下某個(gè)方向鍵，這個(gè)方向的值就改變?yōu)閠rue，div就會(huì)開(kāi)始往這個(gè)方向移動(dòng)。
松開(kāi)方向鍵，這個(gè)方向的值就改變?yōu)閒alse , div就停止這個(gè)方向移動(dòng)了。
基本移動(dòng)，但是有挺頓的代碼
<html><head> <title>鍵盤(pán)控制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)，解決停頓的問(wèn)題
<html><head> <title>鍵盤(pán)控制div移動(dòng)并且解決停頓問(wèn)題</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)頁(yè)面加載完后 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é)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的工作或者學(xué)習(xí)能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
