JS实现倒计时效果

一、html部分

<div>
      <span class="hour">1</span> <strong>:</strong>
      <span class="minute">2</span> <strong>:</strong>
      <span class="second">3</span>
</div>

二、css部分

<style>
    span {
      /* 转化span模式，使span能设置宽高 */
      display: inline-block;
      width: 40px;
      height: 40px;
      background-color: #333;
      color: #fff;
      font-weight: 900;
      /* 使方块中文字居中 */
      text-align: center;
      line-height: 40px;
    }
</style>

三、js部分

<script>
      //获取元素
      var hour = document.querySelector(".hour");
      var minute = document.querySelector(".minute");
      var second = document.querySelector(".second");
      //获取截止时间的时间戳（单位毫秒）
      var inputTime = +new Date("2022-10-06 20:56:00");

      //我们先调用countDown函数，可以避免在打开界面后停一秒后才开始倒计时
      countDown();
      //定时器 每隔一秒变化一次
      setInterval(countDown, 100);
      function countDown() {
        //获取当前时间的时间戳（单位毫秒）
        var nowTime = +new Date();
        //把剩余时间毫秒数转化为秒
        var times = (inputTime - nowTime) / 1000;
        //计算小时数 转化为整数
        var h = parseInt((times / 60 / 60) % 24);
        //如果小时数小于 10，要变成 0 + 数字的形式 赋值给盒子
        hour.innerHTML = h < 10 ? "0" + h : h;
        //计算分钟数 转化为整数
        var m = parseInt((times / 60) % 60);
        //如果分钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
        minute.innerHTML = m < 10 ? "0" + m : m;
        //计算描述 转化为整数
        var s = parseInt(times % 60);
        //如果秒钟数小于 10，要变成 0 + 数字的形式 赋值给盒子
        second.innerHTML = s < 10 ? "0" + s : s;
      }
</script>