JS30~這次的主題是加總，也就是利用reduce去進行時間的加總，聽起來相當容易是吧?的確難度不高，不過影片中提出的應用情境倒是很貼近現實，想像一下你今天瀏覽一個線上課程，它理所當然的會拆成許多小單元，每個小單元旁邊會有影片的長度，這時候你要如何加總這些片段的時間?要知道通常呈現在網頁上的時間戳記多半是span、label或是一個單純的div，以字串的方式儲存3:42這樣的東西。這麼一想要加總時間就沒這麼單純了吧?一起來看看要怎麼做吧!
HTML
//共有58個li 分別對應一個時間 格式都與以下相同
<ul class="videos">
<li data-time="5:43">
Video 1
</li>
</ul>
CSS
none
Javascript
//選取所有的清單點
const timeStamp = [...document.querySelectorAll('[data-time]')]
//將每個清單點的時間取出，並分為分鐘與秒數取出，最後回傳加總後的總秒數
const videoTime = timeStamp
.map(node => node.dataset.time)
.map(time => {
const [mins, secs] = time.split(':').map(parseFloat)
return mins * 60 + secs
})
.reduce((a, b) => a + b)
//將取出的秒數分別化為小時、分鐘、秒數 注意它% 以及/兩個運算符的使用 挺聰明的
let secondsLeft = videoTime;
const hours = Math.floor(secondsLeft / 3600);
secondsLeft = secondsLeft % 3600
const mins = Math.floor(secondsLeft / 60)
secondsLeft = secondsLeft % 60
const totalTimeLeft = `${hours}h${mins}m${secondsLeft}s`
學習重點
- 複複習陣列的chain處理(map&reduce)
- 了解如何處理網頁上的時間戳記(這個在教育平台應該會用到(笑))
- 注意map的使用方式，可以直接傳入一個cb讓它執行，之前沒用過
最終成品
Danny的學習紀錄 