Javascript—通过计时器了解setInterval（）和setTimeout

最新推荐文章于 2021-04-22 11:00:08 发布

何迟

最新推荐文章于 2021-04-22 11:00:08 发布

阅读量209

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/qq_42036616/article/details/81808769

版权

Javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器事件</title>
</head>
<body>
     
      <p id="clock"></p>
      

      <script>
          var clock = setInterval(function(){myClock()},1000 );
          //第一个参数确定，调用的是什么方法，fanction表示调用的是方法，在中括号里面再调用想要实现的方法
          //第二个方法，表示每隔多长时间调用一次
          function myClock() {
              var data = new Date();
              var time = data.toLocaleTimeString();
              // 将得到的事件对象，转换为字符串的类型
              document.getElementById("clock").innerHTML = time;
              //获取的时间的字符串，通过上面的p标签进行承载    
          }
      </script>
<!--通过setInterval（）方法做出一个时钟-->

      <button id="btnStop" onclick="delayStop()">停止</button>
      <script>
          function stopTime() {
              clearInterval(clock);
          }
      </script>
<!--clearInterval()停止一个setInterval()方法，括号内是该一个方法的名字-->

      <script>
          function delayStop() {
              setTimeout(function () {
                  stopTime()
              },3000)
          }
      </script>
<!--setTimeout用法跟setInterval一样，这里stop时间延时3秒执行，通过clearTimeout可以清除
并且本方法可以递归，可以通过这一个方法完成时钟-->
</body>
</html>

效果：

何迟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript—通过计时器了解setInterval（）和setTimeout

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;计时器事件&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &amp
复制链接

扫一扫

专栏目录