JS中关于setTimeout和setInterval定时器两种方式的练习

最新推荐文章于 2023-06-20 15:55:37 发布

黄昏终结者

最新推荐文章于 2023-06-20 15:55:37 发布

阅读量165

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_62181310/article/details/124650681

版权

setTimeout 的用法和 setInterval 一样

setTimeout 只会执行一次
setInterval 一直(重复)执行
clearTimeout 清除定时器

使用 setTimeout 完成页面时钟效果练习:

<body>
    <h2></h2>
    <script>
      let time = document.querySelector("h2");
      let i = 0;
      function foo() {
        
        // 隔 1 秒就会执行 1 次
        let now = new Date();

        // 分别获取:年月日时分秒
        let year = now.getFullYear();
        let month = now.getMonth() + 1;
        let date = now.getDate();
        let hour = now.getHours();
        let minute = now.getMinutes();
        let seconds = now.getSeconds();

        // 将时间显示到页面
        time.innerHTML = `${year}-${month}-${date} ${hour}:${minute}:${seconds}`;

        //每隔一秒递归调用一次 foo
        setTimeout(function () {
          foo();
        }, 1000);
      }
      // 调用函数
      foo();
    </script>
  </body>

使用 setInterval 完成页面倒计时跳转练习:

<body>
    <a href="http://www.itcast.cn">支付成功，<span>5</span> 秒之后跳转首页</a>
    <script>
      // 1.定时器来实现倒计时
      let num = 5;
      let tips = document.querySelector("a span");
      let timer = setInterval(function () {
        num--;
        tips.innerHTML = num;
        if (num === 0) {
          // 2.当计时为0时通过 locatin 进行跳转
          location.href = "http://www.baidu.com";
          // 3.清除定时器
          clearInterval(timer);
        }
      },1000);
    </script>
</body>