問題描述:用js的鍵盤事件控制一個div移動,當按下一個方向鍵不放,div會先停頓一下,然後纔開始持續移動。(原因:系統要區分用戶是否連續輸入,第一個到第二個之間有一個停頓時間)
解決方案:先開一個定時器,讓div一直處於(往4個方向)準備移動的狀態(初始4個方向的值都是false,div就保持在原地不動),當按下某個方向鍵,這個方向的值就改變爲true,div就會開始往這個方向移動,鬆開方向鍵,這個方向的值就改變爲false , div就停止這個方向移動了。
解決版本代碼如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <html> <head> <title>鍵盤控制div移動,解決停頓問題</title> <meta charset= "utf-8" /> <style type= "text/css" > #div1{width:100px;height:100px;background:#ff0000;position:absolute;} </style> <script type= "text/javascript" > window.onload = function (){ var oDiv = document.getElementById( "div1" ); var timer = null; var left = false; var right = false; var top = false; var bottom = false; setInterval( function (){ 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); document.onkeydown = function (ev){ var ev = ev || event; var keyCode = ev.keyCode; switch (keyCode){ case 37: left = true; break ; case 38: top = true; break ; case 39: right = true; break ; case 40: bottom = true; break ; } } document.onkeyup = function (ev){ var ev = ev || event; var keyCode = ev.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> |
說明:本博客文章全部copy於Internet,沒有原創,如有問題請自行解決