网络电商秒杀倒计时案例

这个倒计时案例,我们在浏览网页时经常可以见到,类似下图这个样子

html结构如下:

<div>
    <span id="hour">01</span> : <span id="minute">01</span> :
    <span id="second">05</span>
  </div>

css样式:

 span {
      display: inline-block;
      width: 30px;
      height: 30px;
      background-color: #000;
      color: #fff;
      font-size: 22px;
      text-align: center;
      line-height: 30px;
    }

用js实现具体如下

<script>
    /* 开启间隔1s 永久定时器 
      1.获取页面时h 分m 秒s文本 (文本是值类型, 修改之后对原来的数据没有影响,需要重新赋值才会修改)
      2.s--
      3.如果 s<0, 则s = 59, m--
      4.如果 m<0, 则m = 59,h--
      5.数字补0 ： 如果<10则前面补0
      6.需要将计算的结果，重新赋值给span标签的innerText
      7.如果 h == 0 && m == 0 && s == 0
    */

    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)
  </script>

效果图:

案例主体不是很难,主要是分析清楚值类型与引用类型的赋值区别