【前端案例】11 - 案例：倒计时

注意

1. 最好采用封装函数的方式，这样可以在执行定时器之前先调用一次这个函数， 防止刚开始刷新时有时间空白问题。

.container {
      width: 200px;
      margin: 100px auto;
    }

    .container span {
      float: left;
      width: 30px;
      height: 30px;
      line-height: 30px;
      margin-right: 10px;
      color: #fff;
      text-align: center;
      background-color: #000;
    }

<div class="container">
  <span class="hour">1</span>
  <span class="minutes">2</span>
  <span class="second">3</span>
</div>

  let hour = document.querySelector('.hour');
  let minutes = document.querySelector('.minutes');
  let second = document.querySelector('.second');
  let endTime = +new Date('2020-12-04 16:00:00');

  // 因为在第一次（或者刷新页面）执行的时候会出现 1 秒的时间空白的现象所以在执行定时器之前需要调用一次该函数
  getTime();
  // 设置定时器每隔1秒调用一次
  setInterval(getTime, 1000);

  function getTime() {
    let startTime = +new Date();
    let timeInterval = (endTime - startTime) / 1000;
    let h = parseInt(timeInterval / 60 / 60 % 24);
    h = h < 10 ? '0' + h : h;
    hour.innerHTML = h;
    let m = parseInt(timeInterval / 60 % 60);
    m = m < 10 ? '0' + m : m;
    minutes.innerHTML = m;
    let s = parseInt(timeInterval % 60);
    s = s < 10 ? '0' + s : s;
    second.innerHTML = s;
  }