首页 新闻 会员 周边 捐助

请问大神们,键盘控制一个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>
hduhdc的主页 hduhdc | 初学一级 | 园豆:106
提问于:2016-03-24 09:41
< >
分享
最佳答案
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
RosonJ | 老鸟四级 |园豆:4910 | 2016-03-24 09:50

你是用setTimeout触发一次是吧!我不理解的是当keycode为37的时候div进行运动,再次按下keycode为38的时候为什么div还能同时在两个方向上运动??、

hduhdc | 园豆:106 (初学一级) | 2016-03-24 09:55

@hduhdc: 

我沒有太仔細看,但依照你的描述,第二次按下方向鍵,應該是先回到了原位,再做出移動,所以你會感覺是斜向的移動

RosonJ | 园豆:4910 (老鸟四级) | 2016-03-24 09:57

@hduhdc: 

setInterval是重複的觸發,你的需求是要不停的移動?

RosonJ | 园豆:4910 (老鸟四级) | 2016-03-24 09:59

@RosonJ: 对的我搞错了,setinterval是不断移动的,clearInterval只是防止重复点击加速是吧!clearInterval不能停止定时器

hduhdc | 园豆:106 (初学一级) | 2016-03-24 10:01

@hduhdc: 

clearInterval是可以移除setInterval的定時的

RosonJ | 园豆:4910 (老鸟四级) | 2016-03-24 10:03

@RosonJ: 那么我点击右边下边的时候为什么会同时右边下边走

hduhdc | 园豆:106 (初学一级) | 2016-03-24 10:05

@hduhdc: 

你的clearInterval(timer)位置不對,放在switch裡timer永遠為null

導致你無法移除前一個setInterval的定時

RosonJ | 园豆:4910 (老鸟四级) | 2016-03-24 10:13

@RosonJ: 原来这样。领教了谢谢

hduhdc | 园豆:106 (初学一级) | 2016-03-24 10:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册