方向键控制对象匀速运动问题

<body>
<div id="desktop" style="border:1px solid #000; width:500px; height:500px; margin:0 auto; position:relative;">
 <div id="object" style="position:absolute; top:10px; left:10px; width:10px; height:10px; background-color:#F00;"></div>
</div>
<script type="text/javascript">
var timer1,timer2,timer3,timer4;
var direction = null; 
function xia(){
     if(direction == "xia"){return false; }
  document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)+ 10) + "px";
  if(parseInt(document.getElementById("object").style.top) > 490){
   document.getElementById("object").style.top = 490 + "px";
  }
  clearTimeout(timer2);
  clearTimeout(timer3);
  clearTimeout(timer4);
  timer1 = setTimeout("xia()",5000);
  direction = "xia";
}
function shang(){
 if(direction == 'shang') return false;  
  direction = 'shang';  
 document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)- 10) + "px";
   if(parseInt(document.getElementById("object").style.top) <0){
   document.getElementById("object").style.top = 0 + "px";
  }
}
function zuo(){
 if(direction == 'zuo') return false;  
  direction = 'zuo';  
 document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)- 10) + "px";
  if(parseInt(document.getElementById("object").style.left) <0){
   document.getElementById("object").style.left = 0 + "px";
  }
}
function you(){
 if(direction == 'you') return false;  
  direction = 'you';  
 document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)+ 10) + "px";
  if(parseInt(document.getElementById("object").style.left) > 490){
   document.getElementById("object").style.left = 490 + "px";
  }
}
document.onkeydown = function(e){
 var tops = document.getElementById("object").style.top;
 var e = e || window.event;
 switch(e.keyCode){
  case 40:
   xia();
  break;
  case 38:
  clearInterval(timer1);
   clearInterval(timer3);
   clearInterval(timer4);
    timer2 = setInterval("shang()",500);
  break;
  case 37:
  clearInterval(timer2);
   clearInterval(timer1);
   clearInterval(timer4);
    timer3 = setInterval("zuo()",500);
  break;
  case 39:
  clearInterval(timer2);
   clearInterval(timer3);
   clearInterval(timer1);
    timer4 = setInterval("you()",500);
  break;
  default:
     document.write("I'm looking forward to this weekend!") }
};
</script></body>完整代码如上，请高手指点。怎么样才能实现点键盘上的方向键，小方块匀速远动，连续点击小方块不加速呢？

解决方案 »

  1.   

    <div id="container" style="top:0;left:0;position:absolute;background-color:#eee;width:100px;height:100px;"></div><script type="text/javascript">    //<![CDATA[    var EventUtility = {        addHandler: function (element, eventName, handler) {
                if (typeof element.addEventListener === "function")
                    element.addEventListener(eventName, handler, false);
                else if (typeof element.attachEvent === "object")
                    element.attachEvent("on" + eventName, handler);
                else
                    element["on" + eventName] = handler;
            }
           
        };    function handler(event) {
            var rate = 20;
            var keyCode = event.keyCode;
            var container = document.getElementById("container");
            switch (keyCode) {
                case 37: container.style.left = (parseInt(container.style.left, 10) - rate) + "px"; break;
                case 39: container.style.left = (parseInt(container.style.left, 10) + rate) + "px"; break;
                case 38: container.style.top = (parseInt(container.style.top, 10) - rate) + "px"; break;
                case 40: container.style.top = (parseInt(container.style.top, 10) + rate) + "px"; break;
                default: break;
            }
        }    EventUtility.addHandler(document.documentElement,"keydown",handler);    //]]></script>
      

  2.   

    这样？
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=gb2312">
    <title> new document </title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    </head><body>
    <div id="desktop" style="border:1px solid #000; width:500px; height:500px; margin:0 auto; position:relative;">
     <div id="object" style="position:absolute; top:10px; left:10px; width:10px; height:10px; background-color:#F00;"></div>
    </div>
    <script type="text/javascript">
    var timer1,timer2,timer3,timer4;
    var direction = null;  
    function xia(){
      if(direction != "xia")
        direction = "xia";
      document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)+ 10) + "px";
      if(parseInt(document.getElementById("object").style.top) > 490){
      document.getElementById("object").style.top = 490 + "px";
      }
      
      
    }
    function shang(){
     if(direction != 'shang')
      direction = 'shang';   
     document.getElementById("object").style.top = (parseInt(document.getElementById("object").style.top)- 10) + "px";
      if(parseInt(document.getElementById("object").style.top) <0){
      document.getElementById("object").style.top = 0 + "px";
      }
    }
    function zuo(){
     if(direction != 'zuo')
      direction = 'zuo';   
     document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)- 10) + "px";
      if(parseInt(document.getElementById("object").style.left) <0){
      document.getElementById("object").style.left = 0 + "px";
      }
    }
    function you(){
     if(direction != 'you')
      direction = 'you';   
     document.getElementById("object").style.left = (parseInt(document.getElementById("object").style.left)+ 10) + "px";
      if(parseInt(document.getElementById("object").style.left) > 490){
      document.getElementById("object").style.left = 490 + "px";
      }
    }
    document.onkeydown = function(e){
     var tops = document.getElementById("object").style.top;
     var e = e || window.event;
     switch(e.keyCode){
      case 40:
    clearInterval(timer1);
    clearInterval(timer2);
      clearInterval(timer3);
      clearInterval(timer4);
      timer1 = setInterval("xia()",500);
      break;
      case 38:
    clearInterval(timer1);
    clearInterval(timer2);
      clearInterval(timer3);
      clearInterval(timer4);
      timer2 = setInterval("shang()",500);
      break;
      case 37:
    clearInterval(timer1);
    clearInterval(timer2);
      clearInterval(timer3);
      clearInterval(timer4);
      timer3 = setInterval("zuo()",500);
      break;
      case 39:
    clearInterval(timer1);
    clearInterval(timer2);
      clearInterval(timer3);
      clearInterval(timer4);
      timer4 = setInterval("you()",500);
      break;
      default:
      document.write("I'm looking forward to this weekend!") }
    };
    </script></body>
    </html>