「JavaScript-30」學習筆記（十八）

前言

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

目標

加總播放清單的總秒數，並換算成小時、分鐘與秒數。

筆記

取得所有擁有 data-time 屬性的元素，並將其從 NodeList 型態轉為 Array 型態。

const timeNotes = Array.from(document.querySelectorAll('[data-time]'));

---

使用 map() 和 reduce() 函式取得總秒數。

const seconds = timeNotes
    .map(node => node.dataset.time) // 取得各元素 data-time 屬性的値
    .map(timecode => {
        const [mins, secs] = timecode.split(':').map(parseFloat); // 取得分鐘與秒數
        return (mins * 60) + secs; // 取得總秒數
    })
    .reduce((total, vidSeconds) => total + vidSeconds); // 累加總秒數

---

將累加總秒數換算成小時、分鐘與秒數。

let secondsLeft = seconds;
// 累加總秒數除以 3600，取得商數為 4 小時
const hours = Math.floor(secondsLeft / 3600);
// 累加總秒數除以 3600，取得餘數為 3538 秒
secondsLeft %= 3600;

// 剩餘總秒數除以 60，取得商數為 58 分鐘
const mins = Math.floor(secondsLeft / 60);
// 剩餘總秒數除以 60，取得餘數為 58 秒
secondsLeft %= 60;

console.log(hours, mins, secondsLeft);