倒计时

运用时间戳，实现秒杀倒计时，下班倒计时 主要语法 设置截至时间new Date()，获取截至时间到1970年1月1日的的时间戳date.getTime()，获取当前时间到 1970年1月1日的的时间戳Data.now(主要D要大写)，定时器语法：开启定时器setInterval() ，关闭定时器clearInterval(timeId)和一些简单的算法。

css样式

 .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>

html样式

 <div class="countdown">
    <p class="next">今天是2022年1月21日</p>
    <p class="title">下班倒计时 </p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">00</span>
      <i>:</i>
      <span id="scond">00</span>
    </p>
    <p class="tips">
      21:00:00下班
    </p>
  </div>

js获取标签

设置结束时间

let hours = document.querySelector('#hour')
    let minutess = document.querySelector('#minutes')
    let sconds = document.querySelector('#scond')
    //设置时间
    let date = new Date('2022-1-21 21:00:00')
    let num = 0

添加定时器

设置的时间戳减去当前时间戳，计算现在到设置时间的时长，当时间为0时移出定时器 通过计算设置时分秒，输出到页面

 let timeId = setInterval(function () {
      let newData = Date.now()
      //设置时间戳减去当前时间戳，计算现在到设置时间的时长
      num = +parseInt((date.getTime() - newData) / 1000)
      if (num < 0) {
        clearInterval(timeId)
      }
      //时
      let hour = parseInt(num / 3600)
      //补0操作
      hour = hour < 10 ? '0' + hour : hour
      //分
      let minutes = parseInt((num % 3600) / 60)
      minutes = minutes < 10 ? '0' + minutes : minutes
      //秒
      let miao = parseInt((num % 3600) % 60 % 60)
      miao = miao < 10 ? '0' + miao : miao
      hours.innerHTML = hour
      minutess.innerHTML = minutes
      sconds.innerHTML = miao
    }, 1000)

效果如图：

可能出现的问题：

补0后时间停止会出现0-样式

解决方法： 退出定时器时把时间戳清0

 if (num < 0) {
        clearInterval(timeId)
        num = 0
      }