JS30 day18 Tally String Times with Reduce

Posted by Anthony Chao on 2019-11-18

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)




prevent_hack