来做一个铁人赛倒数计时器吧！

前言

呼～铁人赛终於来到倒数一周的时刻了～
参加铁人赛的大家都辛苦了！
为了振奋一下精神，今天来尝试做一个简单的倒数计时画面吧～

HTML：先准备好标题和倒数时间的部分

<main>
      <h1>iT铁人赛倒数</h1>
      <div class="countdown">
        <div class="time">
          <h2 class="days">0</h2>
          <span>Days</span>
        </div>

        <div class="time">
          <h2 class="hours">0</h2>
          <span>Hours</span>
        </div>

        <div class="time">
          <h2 class="minutes">0</h2>
          <span>Minutes</span>
        </div>

        <div class="time">
          <h2 class="seconds">0</h2>
          <span>Seconds</span>
        </div>
      </div>
</main>

由於我们要计算时间，所以需要知道几个必要的概念：

Date 物件

基於世界标准时间 1970 年 1 月 1 日开始
以毫秒来储存时间（1000毫秒 = 1 秒）
可以传入字串指定时间，如果没有传入值，则为当下时间

对於Date物件不太熟悉的朋友，可以看看追求JS小姊姊系列- 如果时间能重来，我不想跟工具人聊天

setInterval( function, milliseconds, param1, param2, ...)

第一个参数是 callback function，会依据第二个参数所设定的时间间隔循环，不断执行下去
setInterval本身会回传一个独立的 Timer ID，用来传入clearInterval()

有了这些概念後，就可以开始写JS的部分了～

JS部分

// 先选取好之後要改的元素
const days = document.querySelector(".days");
const hours = document.querySelector(".hours");
const minutes = document.querySelector(".minutes");
const seconds = document.querySelector(".seconds");

// 传入字串设定好结束的日期
const endDay = new Date("October 16, 2021 00:00:00");


// 计算距离比赛结束时间
function countTimeLeft() {
  const currentTime = new Date();
  const timeDifference = endDay - currentTime;

  const days = Math.floor(timeDifference / 1000 / 60 / 60 / 24);
  const hours = Math.floor(timeDifference / 1000 / 60 / 60) % 24;
  const minutes = Math.floor(timeDifference / 1000 / 60) % 60;
  const seconds = Math.floor(timeDifference / 1000) % 60;

  return { days, hours, minutes, seconds };
}

计算好时间後，就可以用另一个函式做显示时间的部分

// 以下写法会出错: 必须更新页面，时间才会更新
// 错误原因：每一秒执行的程序是显示时间的函式，但时间的资料是上次执行拿到的资料
// const timeLeft = countTimeLeft();
// const ID = setInterval(displayCountdown(timeLeft), 1000);


// 以下写法才可以在每次显示画面时拿到新的资料显示
const ID = setInterval(() => {
  const timeLeft = countTimeLeft();
  displayCountdown(timeLeft);
}, 1000);


function displayCountdown(timeLeft) {
  const passEndDay =
    timeLeft.days <= 0 &&
    timeLeft.hours <= 0 &&
    timeLeft.minutes <= 0 &&
    timeLeft.seconds < 0;

  if (passEndDay) {
    days.innerHTML = "0";
    hours.innerHTML = "0";
    minutes.innerHTML = "0";
    seconds.innerHTML = "0";
    clearInterval(ID);
  } else {
    days.innerHTML = timeLeft.days;
    hours.innerHTML = timeLeft.hours;
    minutes.innerHTML = timeLeft.minutes;
    seconds.innerHTML = timeLeft.seconds;
  }
}

图片来源：Unsplash