The issue version code is as follows:
12345678910111213141516171819202122232425262728 |
<title>键盘控制div移动</title>
<meta charset=
"utf-8" />
<style type=
"text/css"
>
#div1{width:100px;height:100px;background:#ff0000;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>
<body>
<div id=
"div1"
></div>
</body>
|
Problem Description: With JS keyboard event control a DIV move, when the next key to press a direction, Div will pause first, and then start to continue to move. (Reason: The system to distinguish whether the user is continuous input, the first to the second between a pause time)
Solution: First open a timer, let Div always in (in 4 directions) ready to move the state (the initial 4 direction of the value is false,div to remain in place), when a certain direction key is pressed, the value of this direction changes to True,div will begin to move in this direction, release the arrow keys, The value in this direction is changed to false, and the div stops moving in that direction.
The resolution version code is as follows:
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
<title>键盘控制div移动,解决停顿问题</title>
<meta charset=
"utf-8" />
<style type=
"text/css"
>
#div1{width:100px;height:100px;background:#ff0000;position:absolute;}
</style>
<script type=
"text/javascript"
>
window.onload =
function
(){
var oDiv = document.getElementById(
"div1"
);
var timer = null;
var left = false;
var right = false;
var top = false;
var bottom = false;
setInterval(
function
(){
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);
document.onkeydown =
function
(ev){
var ev = ev || event;
var keyCode = ev.keyCode;
switch
(keyCode){
case 37: left = true;
break
;
case 38: top = true;
break
;
case 39: right = true;
break
;
case 40: bottom = true;
break
;
}
}
document.onkeyup =
function
(ev){
var ev = ev || event;
var keyCode = ev.keyCode;
switch
(keyCode){
case 37: left = false;
break
;
case 38: top = false;
break
;
case 39: right = false;
break
;
case 40: bottom = false;
break
;
}
}
}
</script>
<body>
<div id=
"div1"
></div>
</body>
|
JS Keyboard control div Move, solve the pause problem