防止计时器越跑越快，清除计时器

最新推荐文章于 2022-03-15 09:36:04 发布

人间草木96

最新推荐文章于 2022-03-15 09:36:04 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：个人总结

本文链接：https://blog.youkuaiyun.com/qq_43258252/article/details/86581524

个人总结专栏收录该内容

122 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的简单倒计时功能，通过按钮触发，利用setInterval进行时间递减，到达0时自动清除计时器。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <button onclick="btn()">1</button>
  </body>
  <script>
    function btn() {
      let a = 10
      let timer = setInterval(function() {
        if (a > 0) {
          a -= 1
          console.log(a)
        }
        if (a == 0) {
          //当倒计时为0，清除计时器，防止下一次计时器越跑越快
          clearInterval(timer)
        }
      }, 1000)
    }
  </script>
</html>