JavaScript에서 카운트다운 타이머를 구축하는 방법

JavaScript에서 카운트다운 타이머를 구축하는 방법

2022-06-01 last update

49 minutes reading JavaScript

소개


카운트다운 타이머는 여러 가지 용도가 있다.그들은 사용자에게 그들이 어떤 일을 하는 시간이나 어떤 사건이 발생하는 시간, 예를 들어 새로운 사이트의 시작 시간을 전달할 수 있다.판매와 마케팅 환경에서 그들은 전환을 장려하기 위해 긴박감을 창조할 수 있다.
이 강좌에서는 순수 JavaScript를 사용하여 카운트다운 타이머를 만듭니다.

선결 조건


이 강좌를 완성하려면 다음과 같은 내용이 필요합니다.
  • 컴퓨터에 설치된 노드의 최신 버전입니다.노드를 설치하려면 이 How To Install Node.js 강좌에서 개술한 절차에 따라 조작하십시오.
  • 이 시리즈의 How to Code in JavaScript
  • 에서 자바스크립트 인코딩에 대한 기본적인 이해를 찾을 수 있습니다

    1단계 - 시작


    가장 순수한 형식으로 JavaScript를 사용할 것이기 때문에 프런트엔드 라이브러리가 없기 때문에 너무 많은 안내를 할 필요가 없습니다.
    표준 템플릿 HTML 시작 코드를 사용하여 index.html 파일을 만듭니다.
    지수html
    <!DOCTYPE html>
    <html>
      <body>
    
      </body>
    </html>
    
    <div><body>을 추가합니다.<div>id"countdown"으로 설정해야 합니다.
    지수html
    <!DOCTYPE html>
    <html>
      <body>
        <div id="countdown"></div>
      </body>
    </html>
    
    잠시 후, 자바스크립트 카운트다운 타이머의 출력은 이 <div>에 있습니다.<div> 아래에 <script> 라벨이 포함되어 있습니다.<script> 태그에는 JavaScript 코드가 포함됩니다.
    지수html
    <!DOCTYPE html>
    <html>
      <body>
        <div id="countdown"></div>
        <script>
    
        </script>
      </body>
    </html>
    
    HTML이 준비되면 자바스크립트로 카운트다운 타이머를 작성할 수 있습니다.다음 단계에서, 당신은 카운트다운의 남은 시간을 계산할 것입니다.

    단계 2 - 남은 시간 계산


    남은 시간을 계산하기 전에 countdownTimer이라는 함수를 만듭니다.
    지수html
    <!DOCTYPE html>
    <html>
      <body>
        <div id="countdown"></div>
        <script>
          function countdownTimer() {
        
          }
        </script>
      </body>
    </html>
    
    남은 시간을 계산하려면 현재 시간과 카운트다운 타이머가 만료될 시간 사이의 차이를 찾아야 한다.countdownTimer 함수에서 difference이라는 상량 변수를 만듭니다.다음 코드 세그먼트에서 difference은 2021 신정과 현재 날짜 사이의 차이값으로 설정됩니다.
    지수html
    function countdownTimer() {
      const difference = +new Date("2021-01-01") - +new Date();
    }
    
    new Date 날짜 객체를 작성합니다.+ 이전의 new Date은 JavaScript가 대상을 정수로 변환하는 것을 알려주는 간략한 형식입니다. 이것은 대상의 유닉스 타임 스탬프를 제공하여 기원 이후의 미초로 표시합니다.difference 상량 변수 아래에 remaining이라는 변수를 만듭니다.remaining"Time's up!" 메시지로 설정됩니다.
    지수html
    function countdownTimer() {
      const difference = +new Date("2020-01-01") - +new Date();
      let remaining = "Time's up!";
    }
    
    시간이 끝나고 카운트다운이 끝나면 remaining 메시지가 표시됩니다.
    카운트다운 타이머에 남은 시간이 모두 설정되었습니다.남은 시간(difference)은 밀리초 단위로 계산됩니다.이제 남은 시간을 일, 시간, 분, 초로 포맷해야 합니다.

    단계 3 - 천, 시간, 분 및 초로 포맷


    카운트다운 시간 만료 전의 총 밀리초를 계산한 후, 밀리초를 더욱 읽을 수 있는 값으로 변환해야 한다.이 작업을 수행하기 전에 if문을 작성해야 합니다.
    지수html
    function countdownTimer() {
      const difference = +new Date("2020-01-01") - +new Date();
      let remaining = "Time's up!";
      
      if (difference > 0) {
    
      }
    }
    
    difference0보다 크면 다음 코드를 실행합니다.
    이제 밀리초를 일, 시간, 분 및 초로 변환할 수 있습니다.이를 위해서는 제법, 곱셈 연산을 하고 모델 % 연산자를 사용해야 한다.parts이라는 상수 변수의 객체를 만듭니다.대상의 키는 days, hours, minutesseconds이어야 하며, 상응하는 값은 밀리초를 적당한 시간 단위로 바꾸는 데 필요한 방정식과 일치해야 한다.다음 코드 세션에는 다음 방정식이 표시됩니다.
    지수html
    if (difference > 0) {
      const parts = {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      };
    }
    
    Math.floor 함수는 숫자를 아래로 반올림하는 데 사용됩니다.이 옵션이 있으면 시간 단위의 정수를 얻기 위해 잔수를 삭제할 수 있습니다.
    남은 일수, 시간, 분 및 초로 채워진 객체를 문자열로 포맷해야 합니다.이를 위해 remaining을 다시 분배하고 parts의 키 그룹으로 설정하십시오.Object.keys 메서드를 사용하여 다음을 수행합니다.
    지수html
    if (difference > 0) {
      const parts = {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      };
    
      remaining = Object.keys(parts)
    }
    
    remaining은 현재 parts의 키 그룹으로 설정되었습니다.remaining은 현재 하나의 수조이기 때문에 .map() 방법을 사용할 수 있다..map() 방법은 remaining의 모든 항목을 교체하고 모든 항목에 대한 함수를 실행할 수 있습니다.
    지수html
    
    if (difference > 0) {
      const parts = {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      };
    
      remaining = Object.keys(parts).map(part => {
    
      })
    }
    
    각 항목을 문자열로 변환하려고 합니다.각 시간 단위는 다음 형식을 따라야 합니다. "X일"part 일치 시간 단위.실제 숫자를 얻으려면 parts 대상에 괄호 표현을 사용해야 한다.if 문장을 만들고 해당하는 시간 단위에 숫자가 없는지 확인합니다.숫자가 없으면 반환 문을 추가합니다.
    지수html
    remaining = Object.keys(parts).map(part => {
      if (!parts[part]) return;
    })
    
    해당하는 숫자가 없으면 .map() 방법은 다음 시간 단위로 넘어가 다시 검사합니다.
    숫자가 있으면 숫자를 시간 단위와 함께 되돌려줍니다."X일"형식을 따라야 한다는 것을 명심하십시오.
    지수html
    remaining = Object.keys(parts).map(part => {
      if (!parts[part]) return;
      return `${parts[part]} ${part}`;
    })
    
    ${parts[part]}은 숫자를 반환하고 ${part}은 시간 단위를 반환합니다.현재 remaining은 일, 시간, 분, 초로 구성된 수조이다.이 배열은 문자열이어야 합니다.remaining의 모든 항목은 공백으로 구분해야 한다..join(" ") 방법으로 이 작업을 완료하십시오.
    지수html
    remaining = Object.keys(parts).map(part => {
      return `${parts[part]} ${part}`;
    }).join(" ");
    
    이제 countdownTimer() 함수는 다음과 같습니다.
    지수html
    function countdownTimer() {
      const difference = +new Date("2020-01-01") - +new Date();
      let remaining = "Time's up!";
    
      if (difference > 0) {
        const parts = {
          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
          minutes: Math.floor((difference / 1000 / 60) % 60),
          seconds: Math.floor((difference / 1000) % 60),
        };
        remaining = Object.keys(parts).map(part => {
        return `${parts[part]} ${part}`;  
        }).join(" ");
      }
    }
    
    이제 남은 시간은 문자열과 이해할 수 있는 시간 단위로 포맷되었습니다.그러나 나머지 시간은 페이지에 표시되지 않습니다.이를 위해서는 DOM 작업이 필요합니다.

    단계 4 - 페이지에 남은 시간 표시


    시간 부분을 문자열로 조합하면 <div>을 업데이트하여 이 값을 포함할 수 있습니다.이를 위해서는 DOM 작업이 필요합니다.countdownTimer() 함수와 if 문장 아래에서 getElementById DOM 선택기를 사용하여 <div>id으로 "countdown"을 참조합니다.
    지수html
    function countdownTimer() {
      const difference = +new Date("2020-01-01") - +new Date();
      let remaining = "Time's up!";
    
      if (difference > 0) {
        const parts = {
          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
          minutes: Math.floor((difference / 1000 / 60) % 60),
          seconds: Math.floor((difference / 1000) % 60),
        };
        remaining = Object.keys(parts).map(part => {
        return `${parts[part]} ${part}`;  
        }).join(" ");
      }
    
      document.getElementById("countdown")
    }
    
    <div>의 내용을 변경하려면 .innerHTML에 첨부된 document.getElementById("countdown") 속성을 사용해야 합니다.이 DOM 선택기를 remaining으로 설정합니다.
    지수html
    document.getElementById("countdown").innerHTML = remaining;
    
    현재 countdownTimer() 함수가 완성되었습니다.함수 호출:
    지수html
    function countdownTimer() {
      const difference = +new Date("2020-01-01") - +new Date();
      let remaining = "Time's up!";
    
      if (difference > 0) {
        const parts = {
          days: Math.floor(difference / (1000 * 60 * 60 * 24)),
          hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
          minutes: Math.floor((difference / 1000 / 60) % 60),
          seconds: Math.floor((difference / 1000) % 60),
        };
        remaining = Object.keys(parts).map(part => {
        return `${parts[part]} ${part}`;  
        }).join(" ");
      }
    
      document.getElementById("countdown").innerHTML = remaining;
    }
    
    countDownTimer();
    
    이제 HTML 페이지에 카운트다운 시간이 표시됩니다.시간이 업데이트되지 않을 수도 있습니다.카운트다운 타이머가 자동으로 업데이트될 수 있도록 더 많은 코드를 추가해야 합니다.

    단계 5 - 타이머 자동 업데이트


    지금까지 현재 시간과 카운트다운 만료 시간 사이의 시차를 계산했습니다.시간, 분, 초로 나누어 나머지 시간으로 페이지를 업데이트했습니다.그러나 타이머는 현재 자동으로 업데이트되지 않습니다.
    만약 페이지를 정기적으로 업데이트할 추가 논리가 없다면, 타이머는 다음에 페이지를 불러올 때까지 변하지 않을 것이다.업데이트가 없으면 타이머로 설명하기 어렵다.
    이것은 setInterval 방법을 사용하여 해결할 수 있다.setInterval 메서드를 사용하여 countdownTimer1000을 두 가지 매개 변수로 전송합니다.
    지수html
    countdownTimer();
    setInterval(countdownTimer, 1000);
    
    현재 countdownTimer은 초당 한 번 (또는 1000ms) 실행하고 타이머의 표시를 업데이트합니다.

    결론


    이 강좌에서는 순수 JavaScript를 사용하여 카운트다운 타이머를 만듭니다..map()setInterval 등의 방법을 사용했습니다.이러한 방법을 더욱 깊이 있게 이해하려면 How To Use .map() to Iterate Through Array Items in JavaScriptScheduling Tasks in JavaScript Using setTimeout and setInterval 이 도움이 될 수 있습니다.
    이 프로젝트가 완성됨에 따라 다음 좋은 단계는 React를 혼합물에 추가하는 것이다.이 How to Create a Countdown Timer with React Hooks 강좌는 좋은 출발점이다.