首先说明下为什么会停顿？
效果 ：用键盘控制一个div移动
当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。
原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间
注：了解原因才能解决问题
效果展示
1.简单控制，但是有停顿
2.简单控制，解决停顿
解决方法
方法 ：先开一个定时器，让div一直处于（往4个方向）准备移动的状态
初始4个方向的值都是false，div就保持在原地不动。
按下某个方向键，这个方向的值就改变为true，div就会开始往这个方向移动。
松开方向键，这个方向的值就改变为false , div就停止这个方向移动了。
基本移动，但是有挺顿的代码
<html> <head> <title>键盘控制div移动，会有停顿</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></div> </body> </html
控制移动，解决停顿的问题
<html> <head> <title>键盘控制div移动并且解决停顿问题</title> <meta charset="utf-8" /> <style type="text/css"> /*设置div样式*/ div{ width:100px; height:100px; background: #68affc; position:absolute; left:100px; top:100px; } </style> <script> //当页面加载完后 window.onload = function(){ //获取Div元素 var oDiv = document.getElementById("div1"); //创建各个方向条件判断初始变量 var left = false; var right = false; var top = false; var bottom = false; //当按下对应方向键时，对应变量为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; } }; //设置一个定时，时间为50左右，不要太高也不要太低 setInterval(function(){ //当其中一个条件为true时，则执行当前函数（移动对应方向） 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); //执行完后，所有对应变量恢复为false，保持静止不动 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></div> </body> </html>