您的位置:首页 > Web前端 > JavaScript

原生js实现键盘控制div移动且解决停顿问题

meixitong 2016-12-05 08:41 169 查看

首先说明下为什么会停顿?

效果 :用键盘控制一个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 id="div1"></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 id="div1"></div>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的工作或者学习能带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:

标签:  js div 移动