Day18 Tally String Times with Reduce

第18天的實作練習是從li的屬性取得data-time，並將其數值轉換成秒數，並加總成秒數，最後轉換成時：分：秒制。

首先取得全部li元素，並使用dataset的方式取得li元素中的time的數值，之後將每一個取得的數值用split()轉換成分鐘和秒鐘，並將分鐘數值乘*60轉換為秒數，加原本的秒數，最後使用reduce()將全部li元素的秒數加總。

const seconds = timeNodes
  .map( node => node.dataset.time )
  .map( time => {
    const [mins, secs] = time.split(':').map(parseFloat)
    return (mins*60) + secs
  })
  .reduce((totoalTime, subsec)=> totoalTime + subsec )

接下來把總秒數轉換為時:分:秒的方式呈現，首先將總秒數轉換成小時是透過math.floor()取的最小的整數，是把總秒數除1小時的秒數(3600)秒，用3600秒取餘數，再透過取得餘數去計算分鐘(60)秒，以此類推。

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

最後輸出格式為總秒數轉換成時：分：秒制。

Html

<ul class="videos">
    <li data-time="5:43">
      Video 1
    </li>
    。
    。
    。
    <li data-time="4:04">
      Video 58
    </li>
  </ul>

Javascript

1. Math.floor()
   Math.floor()的方法是回傳再給予參數的最大整數。

Math.floor( 45.95); //  45
Math.floor( 45.05); //  45
Math.floor(  4   ); //   4
Math.floor(-45.05); // -46 
Math.floor(-45.95); // -46

2. parseInt()
   parseInt()將給予參數轉換成數字。

parseInt(' 0xF', 16);
parseInt(' F', 16);
parseInt('17', 8);
parseInt(021, 8);
parseInt('015', 10);   // parseInt(015, 10); will return 15
parseInt(15.99, 10);
parseInt('15,123', 10);
parseInt('FXX123', 16);
parseInt('1111', 2);
parseInt('15 * 3', 10);
parseInt('15e2', 10);
parseInt('15px', 10);
parseInt('12', 13);

Math.floor()與parseInt()的差異，在整數中回傳結果為相同，在負數時Math.floor(-45.5)是回傳-46，parseInt(-45.5)是回傳-45。

tags: dataset, reduce