반응형
기본 코드
<!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>
<li data-time="5:59">
Video 11
</li>
<li data-time="3:07">
Video 12
</li>
<li data-time="11:29">
Video 13
</li>
<li data-time="8:57">
Video 14
</li>
<li data-time="5:49">
Video 15
</li>
<li data-time="5:52">
Video 16
</li>
<li data-time="5:50">
Video 17
</li>
<li data-time="9:13">
Video 18
</li>
<li data-time="11:51">
Video 19
</li>
<li data-time="7:58">
Video 20
</li>
<li data-time="4:40">
Video 21
</li>
<li data-time="4:45">
Video 22
</li>
<li data-time="6:46">
Video 23
</li>
<li data-time="7:24">
Video 24
</li>
<li data-time="7:12">
Video 25
</li>
<li data-time="5:23">
Video 26
</li>
<li data-time="3:34">
Video 27
</li>
<li data-time="8:22">
Video 28
</li>
<li data-time="5:17">
Video 29
</li>
<li data-time="3:10">
Video 30
</li>
<li data-time="4:43">
Video 31
</li>
<li data-time="19:43">
Video 32
</li>
<li data-time="0:47">
Video 33
</li>
<li data-time="0:47">
Video 34
</li>
<li data-time="3:14">
Video 35
</li>
<li data-time="3:59">
Video 36
</li>
<li data-time="2:43">
Video 37
</li>
<li data-time="4:17">
Video 38
</li>
<li data-time="6:56">
Video 39
</li>
<li data-time="3:05">
Video 40
</li>
<li data-time="2:06">
Video 41
</li>
<li data-time="1:59">
Video 42
</li>
<li data-time="1:49">
Video 43
</li>
<li data-time="3:36">
Video 44
</li>
<li data-time="7:10">
Video 45
</li>
<li data-time="3:44">
Video 46
</li>
<li data-time="3:44">
Video 47
</li>
<li data-time="4:36">
Video 48
</li>
<li data-time="3:16">
Video 49
</li>
<li data-time="1:10">
Video 50
</li>
<li data-time="6:10">
Video 51
</li>
<li data-time="2:14">
Video 52
</li>
<li data-time="3:44">
Video 53
</li>
<li data-time="5:05">
Video 54
</li>
<li data-time="6:03">
Video 55
</li>
<li data-time="12:39">
Video 56
</li>
<li data-time="1:56">
Video 57
</li>
<li data-time="4:04">
Video 58
</li>
</ul>
<script>
</script>
</body>
</html>
목표
존재하는 비디오의 전체 시간을 더해서 콘솔값에 출력해보자.
코드 분석
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
const seconds = timeNodes
.map(node => node.dataset.time)
.map(timeCode => {
const [mins, secs] = timeCode.split(':');
return (mins * 60) + secs;
console.log(mins, secs);
})
.reduce((total, vidSeconds) => total + vidSeconds);
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);
여기서 중요한 것은 Array.from으로 묶어주지 않으면 .map메서드를 사용할 수가 없다.
따라서 이걸 쓰기위해 굳이 Array.from으로 묶어준다.
이후에 .time속성을 재배열한 다음 .split으로 분과 초 사이의 :을 없앤 다음 분을 초로 나누어 더해주어 재배열한다.
그다음에 있는 .reduce는 누산기의 역할을 하는 메서드이다.
이를 이용하여 모든 비디오의 런타임을 초로 쪼갠다음 다 더하는 과정이 완료된다.
Math.floor는 반올림을 해주는 해주는 메서드이기 때문에 이것으로 먼저 수를 정수로 만들고, %는 그 뒤에있는 수로 나누어 준 다음 나머지를 출력해주는 것이므로 쪼갠것을 시, 분 순으로 나누어준 다음 남은 초 값은 secondsLeft에 들어가 있기 때문에 console.log로 시, 분, 남은 초 를 출력하면 모든 비디오의 런타임의 합이 나온다.
마무리
자주 본 내용이지만 살짝 헷갈리던 .map과 .split등을 한번 더 상기시킬 수 있는 챕터였다.
내용에는 큰 어려움이 없었음
끝.
반응형
'개발 > JavaScript 30' 카테고리의 다른 글
| 20. Speech Detection (0) | 2017.04.24 |
|---|---|
| 19. Webcam Fun (0) | 2017.04.24 |
| 17. Sort Without Articles (0) | 2017.04.22 |
| 16. Mouse move Shadow (0) | 2017.04.22 |
| 15. LocalStorage (0) | 2017.04.22 |
