欢迎光临
我的个人博客网站

Js BOM中用定时器实现简单运动会遇到的一些小问题及解决

  • 简单运动

    • 简单运动:是一种视觉暂留效果,只要元素变化过程时间够短,给人眼造成的效果就是一个运动的效果,人眼的视觉残留的时间0.1~0.4 s

    • 可以通过定时器,实现每隔一个极短时间(50~100毫秒左右),执行函数,函数内部让运动的属性值发生变化

    • 定时器常见问题1

      • 将定时器的开始和停止过程写在不同的事件函数内部,容易出现用户错误点击情况:

      ​ 简单运动代码如下:
      Js BOM中用定时器实现简单运动会遇到的一些小问题及解决

 <html>         <head>             <meta charset="UTF-8">             <meta http-equiv="X-UA-Compatible" content="IE=edge">             <meta name="viewport" content="width=device-width, initial-scale=1.0">             <title>Document</title>             <style>                 #box{                     width: 100px;                     height: 100px;                     position: absolute;                     left: 0;                     background-color: lightcoral;                 }             </style>         </head>         <body>         <input type="button" id="start" value="开始">         <input type="button" id="end" value="停止">         <div id="box"></div>              <script>             var start = document.getElementById("start");             var end = document.getElementById("end");             var box = document.getElementById("box");                         //信号量  -- 全局变量存储left的属性值,每次都会发生变化实现移动             var boxleft = 0;//初始值必须与box的初始属性值一样             var boxInveral;             start.onclick = function(){               boxInveral = setInterval(function(){                     boxleft += 10;                     box.style.left = boxleft + "px";                  },100);             };                  //清除定时器             end.onclick = function(){                 clearInterval(boxInveral);             }         </script>         </body>         </html>      
  • 定时器常见问题1
    • 将定时器的开始和停止过程写在不同的事件函数内部,容易出现用户错误点击情况:
    • 多次点击开始,会造成加速 :(每一个定时器都是独立的,每点击一次,就相当于再+10,造成加速);
      多次点击开始,不能够停止 :(清除定时器,清除的是当前最新的定时器,而前面设置的全局变量存储的定时器,在你每点击一次开始按钮,就会改变其指向,指向最新的定时器,所以清除定时器,只能清除当前最新的定时器。而前面的那些点击生成的定时器没有办法引用到,也就没有办法再去清除了);
    • 解决方法:设表先关,每次开启新定时器之前,先清除一次前面的定时器,这样就会永远保留当前最新的定时器。
      <script>             var start = document.getElementById("start");             var end = document.getElementById("end");             var box = document.getElementById("box");                         //信号量  -- 全局变量存储left的属性值,每次都会发生变化实现移动             var boxleft = 0;//初始值必须与box的初始属性值一样             var boxInveral;             start.onclick = function(){             //定时器写在事件函数内部,当事件多次被触发,会导致定时器累积             //解决方法:设表先关               clearInterval(boxInveral);//关闭之前的定时器               boxInveral = setInterval(function(){                     boxleft += 10;                     box.style.left = boxleft + "px";                  },100);             };                  //清除定时器             end.onclick = function(){                 clearInterval(boxInveral);             }         </script>  
  • 定时器常见问题2

    • 要求让元素走到指定位置停止,如果步长设置不合理,停止的位置可能就不是指定位置。

    • 解决方法:拉钟停表,在定时器内部每次都要判断是否走到了终点,要不要停止定时器;

      如果走到或超过了终点,强行拉到终点,并停止定时器

<script>         var start = document.getElementById("start");         var end = document.getElementById("end");         var box = document.getElementById("box");                 //信号量  -- 全局变量存储left的属性值,每次都会发生变化实现移动         var boxleft = 0;//初始值必须与box的初始属性值一样         var boxInveral;         start.onclick = function(){             clearInterval(boxInveral);           boxInveral = setInterval(function(){                 // boxleft += 10;                 // boxleft += 20;                 // boxleft += 30;//当前进设置的逐渐变大,最终停下来的位置也不是指定位置了                 boxleft += 35;                                 //判断这一次的运动是否走到了指定500px位置                 if(boxleft >= 500){                     // 解决上面问题方法就是 强行拉到指定位置,直接给变量赋值指定位置                     box.style.left = 500 + "px";                     // 清除定时器                     clearInterval(boxInveral);                 }                 box.style.left = boxleft + "px";              },100);         };          //清除定时器         end.onclick = function(){             clearInterval(boxInveral);         }     </script> 
  • 定时器常见问题3

    • 要求规定时间内让元素走到规定的结束位置,时间间隔可以更改

    • 解决方法:步标整除;

      ​ 总距离 = 步长 * 次数;

      ​ 时间间隔自定义,总时长固定;

      ​ 求出总次数 = 总时间 / 时间间隔

      ​ 定义计数器变量,每执行一次定时器函数加1,直到执行达到总次数,停止定时器

    • 如:3秒,让div从100px走到700px

      <html> <head>     <style>         #box{             width: 100px;             height: 100px;             position: absolute;             left: 100px;             background-color: lightcoral;         }     </style> </head> <body>     <input type="button" id="start" value="开始">     <input type="button" id="end" value="停止">     <div id="box"></div>      <script>         var start = document.getElementById("start");         var end = document.getElementById("end");         var box = document.getElementById("box");          //已知 开始位置、结束位置、总时长、时间间隔         // 总距离 = 步长 * 总次数         // 总距离可以由 开始位置 减 结束位置 得到;已知         // 总次数由 总时长 / 时间间隔 得到;已知         // 所以  步长 = (开始位置 减 结束位置)/(总时长 / 时间间隔);                  //信号量 ,相当于初始值         var boxleft = 100;//初始值必须与box的初始属性值一样         var endleft = 700;//结束位置         var time = 1000;//总时长         var interval = 50;//时间间隔         var step = (endleft - boxleft)/(time / interval);//步长          var boxInveral;          var count = 0;//定义一个次数的累加器          start.onclick = function(){           clearInterval(boxInveral);           boxInveral = setInterval(function(){                 //每次加步长                 boxleft += step;                      //每运动一次,累加器加1                 count ++;                     //判断是否达到总次数                 if(count >= (time / interval)){                     //由于总距离与总时长可能求出的次数不是整数,这样最后停下来的位置也肯可能不准                     // 拉钟停表                     boxleft = endleft;                     clearInterval(boxInveral);                                   }                 box.style.left = boxleft + "px";              },interval);         };          //清除定时器         end.onclick = function(){             clearInterval(boxInveral);         }     </script> </body> </html> 
赞(0) 打赏
未经允许不得转载:张拓的天空 » Js BOM中用定时器实现简单运动会遇到的一些小问题及解决
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏