JavaScript倒计时

设计一个倒计时显示牌，实现方法：用结束时间减去现在时，获取时间差，再利用数学方法从时间差中分别获取时、分、秒等信息，最后通过定时器设置每秒执行一次，实现实时更新。

【操作步骤】

使用 new Date() 获取当前时间，使用 new 调用一个带有参数的 Date 对象，定义结束的时间.使用 getTime() 方法获取现在时和结束时距离 1970 年 1 月 1 日的毫秒数。然后，求两个时间差。

完整代码如下：

<script>
    // 获取元素
    let hourEle = document.querySelector('#hour')
    let minutesEle = document.querySelector('#minutes')
    let scondEle = document.querySelector('#scond')
    let timeId = setInterval(function () {
      // 1.获取目标时间离当前日期的时间戳
      // 1.1 获取目标时间的时间戳
      let date = new Date('2022-1-20 22:50:00')
      // 1.2 获取当前日期的时间戳
      let now = Date.now()
      // 1.3 获取差异
      let offset = parseInt((date.getTime() - now) / 1000) // 秒

      // 判断结束
      if (offset === 0) {
        clearInterval(timeId)
        return
      }

      // 将时间间隔转换为时分秒
      let hour = parseInt(offset / 60 / 60)
      hour = hour < 10 ? '0' + hour : hour
      let minute = parseInt((offset % 3600) / 60)
      minute = minute < 10 ? '0' + minute : minute
      let second = offset % 60
      second = second < 10 ? '0' + second : second

      // 赋值给指定的元素
      hourEle.innerHTML = hour
      minutesEle.innerHTML = minute
      scondEle.innerHTML = second
    }, 1000)
  </script>

显示结果如下：

JavaScript api倒计时

JavaScript倒计时

【操作步骤】