Theme NexT works best with JavaScript enabled

ShunNien's Blog

不積跬步，無以致千里；不積小流，無以成江海。

0%

JS30紀錄 18-Adding Up Times With Reduce

發表於 更新於 分類於 Disqus：

目標

計算列表中的 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

參考資料

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