在javascript运动基础中遇到的常见的问题

讨论计时器setInterval()在运动过程中遇到的常见问题，这里给定一个比较完善的定时器运动程序

*运用到的知识点

代码演示：版本1

版本1实际上你在程序运行的过程中会发现div1会一直无限的往你所需要的那个方向移动，停不下来！怎么解决？请看版本2

<style>#div1{backgroundColor:red;width:200px;heigth:200px;position:absolute;left:0px;} <style> 123456789

<script type="text/javascript">window.onload=function(){var oBtn1=document.getElementById('btn1');var oDiv=document.getElementById('div1');oBtn1.onclick=function(){setInterval(function(){oDiv.style.left=oDiv.offsetLeft+speed+'px';},30)}} </script> 123456789101112

版本2

解决版本1无限运动的问题
在这里，我们可以给定一个变量控制它移动到我们给定的那个距离就让它停下来。

<script type="text/javascript">window.onload=function(){var oBtn1=document.getElementById('btn1');var oDiv=document.getElementById('div1');var timer=null;//这里我将运动距离提了出来，储存到变量speed里面以便更好的操作var speed=10;oBtn1.onclick=function(){timer=setInterval(function(){if(oDiv.offsetLeft>300){clearInterval(timer);}oDiv.style.left=oDiv.offsetLeft+speed+'px';},30)}} </script>

版本3

实际上你还会发现一个问题，就是当我们把变量speed该为奇数是（这里我们改为7），clearInterval(timer);就会无效，他还是会一直无限运动下去，因为7是奇数，它一直加本身最后得到的还是奇数实际上是：7,14,21,28,35…301 系统自动跳过了300，也就是无法识别你的这个if里面的条件。怎么解决呢？

<script type="text/javascript">window.onload=function(){var oBtn1=document.getElementById('btn1');var oDiv=document.getElementById('div1');var timer=null;//这里我将运动距离提了出来，储存到变量speed里面以便更好的操作var speed=7;oBtn1.onclick=function(){timer=setInterval(function(){//这里我们将它改为>=就行了if(oDiv.offsetLeft>=300){clearInterval(timer);}oDiv.style.left=oDiv.offsetLeft+speed+'px';},30)}} </script>

版本4

当div1到达我们给定的那个条件后，实际上当你再次点击button是你会发现你点击一下它动一下，点几下动几下。这个原因就是，虽然你给定了oDiv.offsetLeft>=300这个条件并且 clearInterval(timer);做了一个清除，但是系统还是会执行if下面的这条语句 oDiv.style.left=oDiv.offsetLeft+speed+‘px’;实际上我们加个else 就可以了

<script type="text/javascript">window.onload=function(){var oBtn1=document.getElementById('btn1');var oDiv=document.getElementById('div1');var timer=null;//这里我将运动距离提了出来，储存到变量speed里面以便更好的操作var speed=7;oBtn1.onclick=function(){timer=setInterval(function(){//这里我们将它改为>=就行了if(oDiv.offsetLeft>=300){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+speed+'px';}},30)}} </script>

版本5

最后一个版本的问题也很容易发现，那就是当你点击button点的稍微快一些他移动的越快，打乱了原本的移动速度和距离。因为在移动过程中每点击一次就开一次定时器，点击五次就开了五次定时器，这里我们就只需要一个定时器操作就好了，把原来的定时器先关掉；

<script type="text/javascript">window.onload=function(){var oBtn1=document.getElementById('btn1');var oDiv=document.getElementById('div1');var timer=null;oBtn1.onclick=function(){//每点击一次就把原来的定时器关闭(也可以理解把上一次点击的定时器关闭，只执行一个定时器)clearInterval(timer);//这里我将运动距离提了出来，储存到变量speed里面以便更好的操作var speed=1;timer=setInterval(function(){//这里我们将它改为>=就行了if(oDiv.offsetLeft>=300){clearInterval(timer);}else{oDiv.style.left=oDiv.offsetLeft+speed+'px';}},30)}} </script>

<input id="btn1" type="button" value="开始运动"/> <div id="div1"> </div> 123

相关知识

《JavaScript
在JavaScript中设置具有两个以上条件的变量
javascript dom 编程艺术pdf javascript dom编程艺术pdf下载网盘
JavaScript实现的风飓风数据可视化分析
运动治疗在抑郁症患者康复中的作用与评估
养花过程中经常遇到的十大问题，解决方法！
你了解水产养殖中所遇到的水质问题吗？
javascript实现玫瑰花
href=“JavaScript：；”是啥意思？
用JavaScript实现图片切换功能：项目实例解析

网址: 在javascript运动基础中遇到的常见的问题 https://www.huajiangbk.com/newsview892876.html