【每日一练】倒计时小案例

 样式：

<style>
    span {
      display: inline-block;
      width: 34px;
      height: 30px;
      background-color: rgb(14, 90, 255);
      color: #fff;
      font-size: 22px;
      text-align: center;
      line-height: 30px;
      margin: 100px auto;
      border-radius: 4px;
    }
</style>

JS代码如下：

let timeID = setInterval(function () {
      //1.获取页面时h 分m 秒s文本
      /* 细节： innerText是字符串，需要转成number后运算 */
      let h = +document.querySelector('#hour').innerText
      let m = +document.querySelector('#minute').innerText
      let s = +document.querySelector('#second').innerText
      //2.s--
      s--
      //3.如果s<0,则s = 59, m--
      if (s < 0) {
        s = 59
        m--
      }
      //4.如果 m<0, 则m = 59,h--
      if (m < 0) {
        m = 59
        h--
      }
      //5.数字补0 ： 如果<10则前面补0
      s = s < 10 ? '0' + s : s
      m = m < 10 ? '0' + m : m
      h = h < 10 ? '0' + h : h
      //6.需要将计算的结果，重新赋值给span标签的innerText
      document.querySelector('#hour').innerText = h
      document.querySelector('#minute').innerText = m
      document.querySelector('#second').innerText = s
      //7.如果 h == 0 && m == 0 && s == 0
      if (h == 0 && m == 0 && s == 0) {
        clearInterval(timeID)
      }
    }, 1000)