既然這系列叫JS30，就應該要有30堂課，但由於我第一天寫了個序，導致後面只剩29篇的quotaㄏㄏ。所以今天買一送一，給各位兩個實作，分別是影片速度控制器跟倒數計時器。

影片速度控制器

影片速度控制器在之前第十一堂有使用過了，這次只是換個調整方式，是用mousemove的方法在右邊的bar滑動來調整。概念大同小異，就是如何在bar的元素中透過滑鼠的位置來得到正確的讀數。下面是實作範例：

const speed = document.querySelector('.speed');
const bar = speed.querySelector('.speed-bar');
const video = document.querySelector('.flex');

function handleMove(e) {
    const y = e.pageY - this.offsetTop;
    const percent = y / this.offsetHeight;
    const min = 0.4;
    const max = 4;
    const height = Math.round(percent * 100) + '%';
    const playbackRate = percent * (max - min) + min;
    bar.style.height = height;
    bar.textContent = playbackRate.toFixed(2) + '×';
    video.playbackRate = playbackRate;
  }

speed.addEventListener('mousemove', handleMove);

倒數計時器

倒數計時器的部分比較複雜些，其函式分為幾個部分：

1. timer(seconds)：輸入想要倒數的秒數，每秒抓取一次現在時間Date.now()，並呼叫下面的displayTimeLeft(seconds)。要注意這邊用到setInterval()，裡面必須是每次都重新抓取Date.now()，不能只是某個變數-1，因為當你切換頁籤到別的頁面，或是有時候滾輪離開畫面，setInterval就會暫停執行。所以這裡要每次抓新的時間，確保時間正確。
2. displayTimeLeft(seconds)：這裡就只是簡單的秒換成分+秒的換算，但有個小地方要注意，就是當秒數小於10時，十位數要補0。
3. displayEndTime(timestamp)：顯示倒數完畢時的時間。
4. startTimer()：讓各button觸發timer(seconds)