主題

利用取得播放清單總秒數來複習陣列方法 reduce, map 的使用。

成果

完整程式碼
Demo效果

實作重點

Javascript

1. 取得所有的 li 因為是 類陣列 所以要先轉成陣列

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

2. 取得個別時間

   1. 使用 map 把 dataset 裡的時間取出
   2. 時間轉換成秒數

      1. 使用 map 跑以下步驟

         const seconds = timeNodes
           .map(node => node.dataset.time)
         

      2. 先把分和秒解構出來，再使用 split 把分秒切開，並用 map 把全部變成數字

         .map(timeCode => {
             const [mins, secs] = timeCode.split(':').map(parseFloat);
             return (mins * 60) + secs;
           })
         

      3. return 分針轉換成秒針 + 原本的秒針的值

         .map(timeCode => {
           return (mins * 60) + secs;
         })
         

      4. 使用 reduce 把全部相加

         .reduce((total, vidSeconds) => total + vidSeconds);
         

3. 取得的總秒數計算成幾小時又幾分

   1. 小時 = 總時數 / 每一小時幾秒鐘
      剩餘的小時 = 總時數 % 每一小時幾秒鐘

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

   2. 分鐘 = 總時數 / 每一分鐘幾秒鐘
      剩餘的小時 = 總時數 % 每一分鐘幾秒鐘

      const mins = Math.floor(secondsLeft / 60);
      secondsLeft = secondsLeft % 60
      console.log(hours, mins, secondsLeft);
      

額外知識

• 類陣列 轉成陣列的方法
  • Array.from(li).map(item => item)
  • [...li].map(item => item)
  • [].map.call(li, item => item)
  • [].map.apply(li, [item => item])