定时器的运行和停止

代码 代码 1163 人阅读 | 0 人回复

<
运转按时器:当我们念脚动开启按时器时,我们能够用一个函数去包拆那个按时器,如许的话挪用函数时就可以开启按时器,比方:
  1. function time() {
  2.                   setInterval(function(){
  3.                   alert(&#39;按时器开启胜利&#39;)
  4.            }, 2000)
  5.         }             //将按时器写进函数。
  6.         time();    //挪用函数。
复造代码
完毕按时器:当我们念截至按时器时,能够对按时器本人停止定名,并使用clearInterval函数去完毕按时器的运做。
  1. var t = setInterval(function () {
  2.     alert(&#39;按时器开启胜利&#39;)
  3. }, 2000)              //用t去对按时器停止定名
  4. clearInterval(t);     //消弭名字为t的那个按时器
复造代码
接下去是一个完好案例,别离使用两个button按钮去掌握一个div盒子的运转战截至
  1. <!DOCTYPE html>
  2. <html lang="zh=CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         div {
  10.             position: absolute;
  11.             top: 250px;
  12.             left: 300px;
  13.             height: 100px;
  14.             width: 100px;
  15.             border: 2px solid black;
  16.             border-radius: 10px;
  17.         }
  18.         button {
  19.             height: 30px;
  20.             width: 60px;
  21.             position: absolute;
  22.             top: 200px;
  23.             left: 290px;
  24.         }
  25.         button.stop {
  26.             position: absolute;
  27.             top: 200px;
  28.             left: 360px;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <button class="right">往左</button>
  34.     <button class="stop">截至</button>
  35.     <div>
  36.     </div>
  37.     <script>
  38.         var div = document.querySelector(&#39;div&#39;);
  39.         var btn = document.querySelector(&#39;button.right&#39;);
  40.         var stop = document.querySelector(&#39;button.stop&#39;);
  41.         var showtime = function () {
  42.             div.style.left = div.offsetLeft + 1 + &#39;px&#39;;
  43.         }
  44.         var t;
  45.         function time() {
  46.             t = setInterval(showtime, 20)
  47.         }
  48.         btn.addEventListener(&#39;click&#39;, function () {
  49.                                 clearInterval(t);
  50.             time();
  51.         })
  52.         stop.addEventListener(&#39;click&#39;, function () {
  53.             clearInterval(t);
  54.         })
  55.     </script>
  56. </body>
  57. </html>
复造代码
感谢各人。

免责声明:假如进犯了您的权益,请联络站少,我们会实时删除侵权内乱容,感谢协作!
1、本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,按照目前互联网开放的原则,我们将在不通知作者的情况下,转载文章;如果原文明确注明“禁止转载”,我们一定不会转载。如果我们转载的文章不符合作者的版权声明或者作者不想让我们转载您的文章的话,请您发送邮箱:Cdnjson@163.com提供相关证明,我们将积极配合您!
2、本网站转载文章仅为传播更多信息之目的,凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证信息的正确性和完整性,且不对因信息的不正确或遗漏导致的任何损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务,本网站概不负责,亦不负任何法律责任。
4、本网站所刊发、转载的文章,其版权均归原作者所有,如其他媒体、网站或个人从本网下载使用,请在转载有关文章时务必尊重该文章的著作权,保留本网注明的“稿件来源”,并自负版权等法律责任。
回复 关闭延时

使用道具 举报

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则