原生js实现键盘控制div移动且解决停顿问题
更新时间：2016年12月05日 08:41:22 投稿：daisy
这篇文章主要给大家介绍了如何利用原生js实现键盘控制div移动，并且解决在移动过程中的停顿问题，文中给出了详细的示例代码，相信对大家的理解和学习很有帮助，下面跟着小编一起来看看吧。
首先说明下为什么会停顿？
效果 ：用键盘控制一个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实现在字符串中提取数字。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
KnockoutJS 3.X API 第四章之事件event绑定
event绑定即为事件绑定，即当触发相关DOM事件的时候回调函数,这篇文章主要介绍了KnockoutJS 3.X API 第四章之事件event绑定的相关知识，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了Bootstrap 3 进度条的实现,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
这篇文章主要介绍了JS实现发送短信验证后按钮倒计时功能防止刷新倒计时失效问题，在项目开发中经常会用到此功能，下面小编通过本文给大家分享JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)，需要的朋友参考下吧2017-07-07
Next.js 是一个轻量级的 React 服务端渲染应用框架。文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
本篇文章主要介绍了微信小程序开发经验总结（推荐），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
下面小编就为大家带来一篇浅谈js中的延迟执行和定时执行。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要教大家如何简单实现js悬浮导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
这篇文章主要介绍了微信小程序获取用户信息的两种方法wx.getUserInfo与open-data,结合实例形式分析了wx.getUserInfo与open-data获取用户信息的相关操作技巧与使用注意事项,需要的朋友可以参考下2019-05-05
这篇文章主要为大家详细介绍了JS组件Bootstrap Table分页使用方法，具有一定的实用性，感兴趣的小伙伴们可以参考一下2016-05-05
最新评论