WES BOS系列影片
Alex快速導讀系列影片

今天的練習會用到reduce()
還有用一些數學的運算，將秒數換算成時分秒
然後又複習了一下dataset的用法
事不宜遲，馬上開始吧!

今天就是要把data-time中的值取出，之後進行秒數的加總，
最後將秒數換算成時分秒

1.先把所有li都選起來

const timeNodes = [...document.querySelectorAll('[data-time]')]

別忘了document.querySelectorAll選出來是Nodelist，
記得先轉換成Array

2.先取出data-time的值，並回傳成陣列

const seconds = timeNodes
.map(time => time.dataset.time)

3.拆解陣列中的字串，並使其成為數字

const seconds = timeNodes
.map(time => time.dataset.time)
.map(timeCode => {
const [mins, secs] = timeCode.split(':')
return (mins * 60) + secs*1
})

4.使用reduce()做加總，算出總秒數

const seconds = timeNodes
.map(time => time.dataset.time)
.map(timeCode => {
const [mins, secs] = timeCode.split(':')
return (mins * 60) + secs*1
})
.reduce((prev, next) => prev + next)

5.將總秒數換算成 時、分、秒
首先要知道 3600秒 = 1時 ，60秒 = 1分

const hour = Math.floor(seconds/3600) // 總秒數/3600，並轉成整數，即為小時
const secondsLeft =  seconds % 3600 // 總秒數/3600的餘數，即為扣除小時後剩餘的秒數
const min = Math.floor(secondsLeft/60) // 剩餘的秒數/60，並轉成整數，即為分鐘
const second = secondsLeft % 60 // 剩餘的秒數/60的餘數，即為扣除分鐘後剩餘的秒數

console.log(`總秒數:${seconds}秒，換算後為${hour}時${min}分${second}秒`)

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30