JavaScript-30-Day-18

Reduce로 시간 합산

데모

오늘 우리는 Array.prototype.map 및 Array.prototype.reduce를 사용하여 주어진 비디오의 총 실행 시간을 시간, 분, 초 단위로 계산할 것입니다.

그래서 우리는 각각 비디오를 모방한 항목 목록을 받았고 각 항목에는 data-time 형식의 비디오 길이를 알려주는 minutes:seconds 속성이 있으며 DOM에서 항목을 가져오는 방법을 알아내야 합니다. 그것들을 숫자로 변환하고, 분과 초로 만들고, 모두 더하고, 전체가 몇 시, 분, 초인지 파악한 다음 마지막으로 실제 값console.log을 계산합니다.

다음은 주어진 목록 항목의 샘플입니다.

<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>
</ul>

가장 먼저 할 일은 해당 노드를 모두 선택하는 것입니다.

const timeNodes = document.querySelectorAll("[data-time]");

항상 목록 항목이 될지 모르기 때문에 목록 항목을 선택하지 않고 data-time 속성이 있는 항목을 선택합니다.

이제 이timeNodes는 NodeList이고 map를 사용하려면 배열이 필요하므로 이를 노드 목록에서 실제 시간 문자열 배열로 변환해야 합니다.

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

NowtimeNodes는 목록 항목의 배열입니다.

이제 이 목록 항목 배열에서 시간 초과를 추출합니다.

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

Nowseconds는 문자열 배열(모든 시간 포함)입니다.

이제 시간을 초 단위로 변환하려고 합니다. 지금 시간이 있는 형식은 minutes:seconds이므로 이 문자열을 :에서 분할해야 합니다.

const seconds = timeNodes.map((node) => node.dataset.time).map((timeCode) => {
          const [mins, secs] = timeCode.split(":");

그러나 여기서 우리가 마주치는 문제는 우리가 얻는 것도 문자열로 나누고 모든 종류의 수학적 계산을 수행하려면 숫자가 필요하다는 것입니다.



따라서 배열을 다시 매핑하고 parseFloat를 사용하여 문자열을 숫자로 변환해야 합니다.
parseFloat가 문제를 어떻게 해결하는지 확인할 수 있습니다.

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

이것은 우리에게 모든 시간을 초 단위로 제공합니다.



이제 모든 시간이 초 단위이므로 모두 더해야 하고 이를 위해 reduce를 사용할 것입니다.

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

이것은 함께 추가된 모든 단일 비디오의 총 시간(초)을 제공합니다.

총 초를 시, 분, 초로 줄이는 시간입니다.

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

We use Math.floor to get rid of the decimal part, for example 2.5 hours needs to be converted to 2 hours and we'll convert the remaining 0.5 hours into minutes and seconds

1hour=3600seconds

      secondsLeft = secondsLeft % 3600;
      const mins = Math.floor(secondsLeft / 60);
      //1min=60seconds
      secondsLeft = secondsLeft % 60;
console.log(`${hours}hours ${mins}minutes ${secondsLeft}seconds`);

이것은 최종 출력입니다.



이것으로 오늘의 프로젝트가 완료되었습니다.

GitHub 저장소:

cenacrharsh / JS-30-DAY-18

javascript30의 Day-17 블로그

JavaScript-30-Day-17

KUMAR HARSH ・ 6월 17일 ・ 3분 읽기

#javascript #webdev #github #programming

javascript30의 Day-16 블로그

JavaScript-30-Day-16

KUMAR HARSH ・ 6월 16일 ・ 3분 읽기

#javascript #css #github #webdev

javascript30의 Day-15 블로그

JavaScript-30-Day-15

KUMAR HARSH ・ 6월 15일 ・ 5분 읽기

#javascript #github

개발자 프로필


.ltag__user__id__641726 .follow-action-button {
배경색: #000000 !중요;
색상: #000000 !중요;
테두리 색상: #000000 !중요;
}

KUMAR HARSH 팔로우

The best way to learn is to teach.Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.



javascript30에서 도전할 수도 있습니다.

감사
, WesBos 이것을 우리와 공유하십시오! 😊💖

댓글을 달아 의견을 알려주세요.

감사합니다!