Adding Up Times with Reduce

목표

목록의 동영상들의 총 재생시간을 구하는 것

기본 코드

<!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>
    <li data-time="3:45">
      Video 3
    </li>
    <li data-time="0:47">
      Video 4
    </li>
    <li data-time="5:21">
      Video 5
    </li>
    <li data-time="6:56">
      Video 6
    </li>
    <li data-time="3:46">
      Video 7
    </li>
    <li data-time="5:25">
      Video 8
    </li>
    <li data-time="3:14">
      Video 9
    </li>
    <li data-time="3:31">
      Video 10
    </li>
  </ul>
<script>
</script>
</body>
</html>

과정

  1. 배열 선언
  2. 동영상들의 총 재생시간을 초단위로 구함
  3. 총 재생시간을 시, 분, 초로 바꿔줌

코드 분석

  1. 배열 선언

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

    timeNode[data-time]을 가진 태그들을 배열로 담아준다.

  2. 동영상들의 총 재생시간을 초단위로 구함

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

    seconds에 배열의 값들의 재생시간을 담고,
    재생시간을 :를 기준으로 분, 초로 나눠 분값에 60을 곱해 총 재생 시간을 초단위로 뽑아내 정수로 출력,
    그 뒤에 total에 모든 동영상의 재생시간을 합한 값을 출력한다.

  3. 총 재생시간을 시, 분, 초로 바꿔줌

     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);
    

    secondsLeft에 총 재생시간(초단위)를 담아,
    3600으로 나눈 몫, 즉 시간을 hours에 담고
    나머지를 secondsLeft에 담아 60으로 나눈 몫을 mins에 담고 그나머지를 secondsLeft에 담는다.
    결과적으로 hours,mins,secondsLeft에 총 재생시간이 시, 분, 초 단위로 담기게 된다.

찾아본 내용, 알게된 내용들

reduce - 누산기 역할을 함. 전에도 찾아본건데 또 찾아봄.. 복습이 중요한걸 다시 깨달았다.

'개발 > JavaScript30' 카테고리의 다른 글

20. Native Speech Recognition  (1) 2017.04.17
19. Webcam Fun  (0) 2017.04.17
18. Adding Up Times with Reduce  (0) 2017.04.16
17. Sort Without Articles  (0) 2017.04.13
16. Mouse Move Shadow  (0) 2017.04.13
15. LocalStorage  (0) 2017.04.13

+ Recent posts