Theme NexT works best with JavaScript enabled

ShunNien's Blog

不積跬步,無以致千里;不積小流,無以成江海。

0%

JS30紀錄 18-Adding Up Times With Reduce

目標

計算列表中的 dataset 時間的總和,在 console 輸出時、分、秒的數據,此篇需要搭配 console 觀看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Videos</title>
</head>
<body>
<ul class="videos">
<li data-time="5:43">
Video 1
</li>
<li data-time="2:33">
Video 2
</li>
<!-- 以下省略... -->
</ul>
</body>
</html>

Demo | Github

處理步驟

步驟 1.

一開始取得所有 data-time 的 DOM,並注意轉換為 Array

querySelectorAll 取出來的資料是類似 Array 而已,所以加上 Array.from 轉換為 Array

1
const timeNodes = Array.from(document.querySelectorAll("[data-time]"));

步驟 2.

  • 利用 map 來取得 dataset 資料
1
2
const seconds = timeNodes
.map(node => node.dataset.time)
  • 繼續利用 map 將分與秒轉換為秒數
1
2
3
4
5
6
7
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 來加總資料
1
2
3
4
5
6
7
8
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, vidSeconds) => total + vidSeconds);

步驟 3.

總秒數取出來後,劃分時、分、秒的數值,利用 Math.floor% 取得餘數的方式

1
2
3
4
5
6
7
8
9
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);

筆記與備註事項

JavaScript 部分

Math.floor()

類似無條件捨去,直接取整數,需要注意的是負數的運用

1
2
3
4
5
6
7
8
9
10
Math.floor( 45.95); 
// 45
Math.floor( 45.05);
// 45
Math.floor( 4 );
// 4
Math.floor(-45.05);
// -46
Math.floor(-45.95);
// -46

參考資料

歡迎關注我的其它發布渠道