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

时间：2021-05-25

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

效果 ：用键盘控制一个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{ 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>

总结

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章