请问大神们，键盘控制一个div的移动，
0
悬赏园豆：10
[已解决问题]
解决于 2016-03-24 10:16
我加了定时器为什么当我按下左的时候会往左走但是再按下下的时候div不是往下走而是往右下走，难道我的clearInterval没起作用吗？？？？
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档ccc</title> 6 <style> 7 #div1{background:red;width:100px;height:100px;position:absolute;} 8 </style> 9 <script> 10 window.onload = function() { 11 12 var oDiv=document.getElementById('div1'); 13 document.onkeydown=function(ev){ 14 var ev=ev||event; 15 var timer=null; 16 switch(ev.keyCode){ 17 case 37: clearInterval( timer );timer=setInterval(function(){ oDiv.style.left=oDiv.offsetLeft-10+'px';},900) ; break; 18 case 38: clearInterval( timer );timer=setInterval(function(){oDiv.style.top=oDiv.offsetTop-10+'px';},900);break; 19 20 case 39: clearInterval( timer );timer=setInterval(function(){oDiv.style.left=oDiv.offsetLeft+10+'px';},900);break; 21 case 40: clearInterval( timer );timer=setInterval(function(){oDiv.style.top=oDiv.offsetTop+10+'px';},900);break;} 22 23 24 25 26 27 28 29 } 30 31 32 } 33 </script> 34 </head> 35 36 <body> 37 <div id="div1"></div> 38 </body></html>
最佳答案
0
window.onload = function() { var oDiv = document.getElementById('div1'); document.onkeydown = function(ev) { var ev = ev || event; var timer = null; switch (ev.keyCode) { case 37: setTimeout(function() { oDiv.style.left = oDiv.offsetLeft - 10 + 'px'; }, 100); break; case 38: setTimeout(function() { oDiv.style.top = oDiv.offsetTop - 10 + 'px'; }, 100); break; case 39: setTimeout(function() { oDiv.style.left = oDiv.offsetLeft + 10 + 'px'; }, 100); break; case 40: setTimeout(function() { oDiv.style.top = oDiv.offsetTop + 10 + 'px'; }, 100); break; } } }
雖然不懂你設定時的原因，改成這樣吧
收获园豆：10
你是用setTimeout触发一次是吧!我不理解的是当keycode为37的时候div进行运动，再次按下keycode为38的时候为什么div还能同时在两个方向上运动？？、
@hduhdc:
我沒有太仔細看，但依照你的描述，第二次按下方向鍵，應該是先回到了原位，再做出移動，所以你會感覺是斜向的移動
@hduhdc:
setInterval是重複的觸發，你的需求是要不停的移動？
@RosonJ: 对的我搞错了，setinterval是不断移动的，clearInterval只是防止重复点击加速是吧！clearInterval不能停止定时器
@hduhdc:
clearInterval是可以移除setInterval的定時的
@RosonJ: 那么我点击右边下边的时候为什么会同时右边下边走
@hduhdc:
你的clearInterval(timer)位置不對，放在switch裡timer永遠為null
導致你無法移除前一個setInterval的定時
@RosonJ: 原来这样。领教了谢谢
