CodingWife 寇丁人妻日安

【JS30】Day18:Adding Up Times with Reduce

2018-03-16

javascript 30day

目標:使用 reduce 總和所有播放影片的時間

一、抓 DOM

const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
const seconds = timeNodes.map(node => node.dataset.time);

使用[...]Array.from()先將取用到的dataset的 nodelist 轉換成陣列。

二、加總計算

const seconds = timeNodes
.map(node => node.dataset.time)
.map(timeCode => {
const [mins, secs] = timeCode.split(':').map(parseFloat);
return (mins * 60) + secs;
console.log(mins, secs)
})
.reduce((total, vidSecondes) => total + vidSecondes);

使用map轉換成新陣列,取用dataset的數值,使用split刪除:符號分割,
並從字串轉換為數字,分鐘轉換秒數加總,再使用reduce做陣列加總。

三、計算小時

let secondsLeft = seconds;
const hours = Math.floor(secondsLeft / 3600);
secondsLeft = secondsLeft % 3600;

const mins = Math.floor(secondsLeft / 60);
secondsLeft = secondsLeft % 60;

console.log(hours, mins, secondsLeft);

計算小時,將秒數轉換成小時後,使用Math.floor()取用整數,
再使用%計算剩餘的秒數,再以同樣的方法轉換分鐘,便可以計算出所有影片的小時/分鐘/秒數。

三、計算分鐘

使用技巧