iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 25
2
Modern Web

實作經典 JavaScript 30系列 第 25

Day25: Adding Up Times With Reduce

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


上一篇
Day24: Sort Without Articles
下一篇
Day26: Follow Along Links
系列文
實作經典 JavaScript 3030

尚未有邦友留言

立即登入留言