js中連按鍵盤卡頓現象

時間 2021-08-13

標籤 javascript php css html java ide spa code htm 事件欄目 JavaScript 简体版

原文原文鏈接

問題描述：用js的鍵盤事件控制一個div移動，當按下一個方向鍵不放，div會先停頓一下，而後纔開始持續移動。（緣由：系統要區分用戶是否連續輸入，第一個到第二個之間有一個停頓時間）javascript

解決方案：先開一個定時器，讓div一直處於（往4個方向）準備移動的狀態（初始4個方向的值都是false，div就保持在原地不動），當按下某個方向鍵，這個方向的值就改變爲true，div就會開始往這個方向移動，鬆開方向鍵，這個方向的值就改變爲false , div就中止這個方向移動了。php

解決版本代碼以下：css

<html>

<head>

<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>

</head>

<body>

<div id= "div1" ></div>

</body>

</html>

說明：本博客文章所有copy於Internet，沒有原創，若有問題請自行解決html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。