[js小品一则] 实现一下倒计时效果

最新推荐文章于 2025-08-13 21:05:35 发布

嘻咦啊写

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量163

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript leetcode 前端

本文链接：https://blog.csdn.net/belloc_li/article/details/123214337

本文通过JavaScript实现了一个简单的倒计时功能，包括获取页面中时、分、秒元素的值，进行递减计算，处理位数不足时的补零操作，并在倒计时结束后清除定时器。代码清晰易懂，适合初学者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天用js的定时器来实现一下倒计时的效果
在这里插入图片描述

首先分析一下思路。

开启永久定时器，间隔时间1s
  (1)获取 时h  分m  秒s 文本innerText
  (2)秒自减  s--
  (3)如果 s < 0 :  s = 59 , m--
  (4)如果 m < 0 :  m = 59, h--
  (5)如果 m h s 小于10，则补0
  (6)将计算之后的h m s 重新赋值给页面元素innerText
  (7)如果 h == 0 && m == 0 && s == 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>
  <style>
    div{
      margin: auto;
      width: 300px;
    }
    span {
      display: inline-block;
      width: 30px;
      height: 30px;
      background-color: #000;
      color: #fff;
      font-size: 22px;
      text-align: center;
      line-height: 30px;
    }
  </style>
</head>

<body>
  <div>
    <span id="hour">00</span> : <span id="minute">00</span> :
    <span id="second">10</span>
  </div>

  <script>
   
    let timeID = setInterval(function () {
        //2.先获取当前的h m s
        /* 注意点; innerText获取的是字符串类型，应该先转成数字后再做计算 */
        let h = +document.querySelector('#hour').innerText
        let m = +document.querySelector('#minute').innerText
        let s = +document.querySelector('#second').innerText

        //3.s--
        s--
        //4.如果s < 0, s = 59,m--
        if (s < 0) {
          s = 59
          m--
        }
        //5.如果m < 0, m = 59,h--
        if (m < 0) {
          m = 59
          h--
        }

        //6. 优化： 如果h m s 小于10，则在前面加上0
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        s = s < 10 ? '0' + s : s

        //7.计算后的结果重新显示到页面
        console.log(h, m, s)
        document.querySelector('#hour').innerText = h
        document.querySelector('#minute').innerText = m
        document.querySelector('#second').innerText = s

        //8.倒计时结束
        if (h == 0 && m == 0 && s == 0) {
          clearInterval(timeID)
        }
      }, 1000)

  </script>


</body>

</html>