「JavaScript 30」學習筆記（廿八）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

製作一個可控制影片速率的拉把。

筆記

選取速度條。

const speed = document.querySelector('.speed');

選取速度文字。

const bar = speed.querySelector('.speed-bar');

選取影片。

const video = document.querySelector('.flex');

---

建立一個 handleMove() 方法，以改變速度條樣式和影片速度。

function handleMove(e) {
    // 滑鼠在速度條上的 y 偏移量
    const y = e.pageY - this.offsetTop;
    // 速度條長度比例
    const percent = y / this.offsetHeight;
    // 最小速度
    const min = 0.4;
    // 最大速度
    const max = 4;
    // 速度條長度百分比
    const height = Math.round(percent * 100) + '%';
    // 設置速度條樣式
    bar.style.height = height;
    // 速度文字
    const playbackRate = percent * (max - min) + min;
    // 更改速度文字
    bar.textContent = playbackRate.toFixed(2) + '×';
    // 設置影片速度
    video.playbackRate = playbackRate;
}

---

監聽速度條，當發生 mousemove 事件，觸發 handleMove() 方法。

speed.addEventListener('mousemove', handleMove);