JS30 day18 - Tally String Times with Reduce

作業內容

今天也是主要在練習 JS 的 map / reduce 這兩種方法，要把影片的總時間加總，練習字串轉時間的過程

學到什麼

• JS

  1. nodeList 不能使用 map，只有 array 可以
     把 nodeList 轉換成 array: Array.from(<nodeList>) 或者 [...<nodeList>]

  2. 如果要使用一個方法把一個陣列的項目全部轉換的話，可以直接使用 `arr.map(function)

  1 2 3 4 5 6 7 8 9 10 11

  time = "1:56" splited_time = time.split(":").map(parseFloat) console.log(splited_time) time = "1:56" splited_time = time .split(":") .map((timeCode)=>{ return parseFloat(timeCode) }) console.log(splited_time)

參考資料：
https://github.com/wesbos/JavaScript30

code 內容：
HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<ul class="videos">
  <li data-time="5:43">
    Video 1
  </li>
  <li data-time="2:33">
    Video 2
  </li>
  <li data-time="3:45">
    Video 3
  </li>
  <li data-time="0:47">
    Video 4
  </li>
  <li data-time="5:21">
    Video 5
  </li>
  ...

JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

const seconds = timeNodes
                      .map((node)=>node.dataset.time)
                      .map((timeCode) => {
                        const [min, seconds] = timeCode.split(":").map(parseFloat);
                        return (min * 60 + seconds)
                      })
                      .reduce((sum, videoTime)=>{ return sum + videoTime } )
let secondsLeft = seconds

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

let minutes = Math.floor(secondsLeft / 60)
secondsLeft = secondsLeft % 60

console.log(hours, minutes, secondsLeft)

• ← Previous Post
• Next Post →