原生射流研究…实现键盘控制差异移动且解决停顿问题

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

效果：用键盘控制一个差异移动

当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。

原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间注：了解原因才能解决问题

效果展示

1.简单控制，但是有停顿

2.简单控制，解决停顿

解决方法

方法：先开一个定时器，让差异一直处于（往四个方向)准备移动的状态

初始四个方向的值都是false，div就保持在原地不动。

按下某个方向键，这个方向的值就改变为真，div就会开始往这个方向移动。

松开方向键，这个方向的值就改变为false，div就停止这个方向移动了。

基本移动，但是有挺顿的代码

htmlhead标题键盘控制差异移动，会有停顿/title meta charset=' utf-8 '/style type=' text/CSS ' # div 1 { width :100 px；高度：100 px背景：绿色黄色；位置：绝对；}/style脚本类型=' text/JavaScript '窗口。onload=function(){ var Odiv=document。getelementbyid(' div 1 ')；文件。onkey down=function(ev){ var ev=ev | | event；var密钥代码=ev。密钥代码；开关(钥匙代码){ case 37: Odiv。风格。左=Odiv。offset left-10 ' px '；打破；案例38: Odiv。风格。top=Odiv。偏移顶部-10 ' px '；打破；案件39: Odiv。风格。左=Odiv。offsetleft 10 ' px打破；案件40: Odiv。风格。top=Odiv。偏移顶部10 ' px打破；} } }/script/head dydiv id=' div 1 '/div/body/html控制移动，解决停顿的问题

htmlhead标题键盘控制差异移动并且解决停顿问题/title meta charset=' utf-8 '/style type=' text/CSS '/*设置差异样式*/div { width :100 px；高度：100 px背景技术# 68affc位置：绝对；left :100 pxtop :100 px }/style脚本//当页面加载完后window.onload=function(){ //获取差异元素var oDiv=文档。getelementbyid(' div 1 ')；//创建各个方向条件判断初始变量var left=false var right=false var top=false var bottom=false//当按下对应方向键时，对应变量为真实文件。onkeydown=function(ev){ var oEvent=ev | | event；var键码=oevent。密钥代码；开关(键码){ case 37: left=true打破；案例38: top=真打破；案例39:右=真；打破；案例40:底部=真；打破；} };//设置一个定时，时间为50左右，不要太高也不要太低setInterval(函数(){ //当其中一个条件为真实的时，则执行当前函数（移动对应方向)if(左){ odiv。风格。左=odiv。offset left-10 ' px '；} else if(top){ odiv。风格。top=odiv。offset top-10 ' px '；}else if(右){ odiv。风格。左=odiv。offsetleft 10 ' px}else if(底部){ odiv。风格。top=odiv。offsettop 10 ' px} },50);//执行完后，所有对应变量恢复为假的，保持静止不动文件。onkeyup=function(ev){ var oEvent=ev | | event；var键码=oevent。密钥代码；开关(键码){ case 37: left=false打破；案例38: top=false打破；案例39:右=假；打破；案例40:底部=假；打破；} } }/script/head dydiv id=' div 1 '/div/body/html总结

以上就是本文的全部内容。希望本文的内容能给大家的工作或学习带来一些帮助。有问题可以留言交流。