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

반응형

JavaScript, HTML 및 CSS를 사용하여 카운트다운 타이머를 만드는 빠른 안내서입니다.

도입부

이 글에서는 HTML, CSS, 바닐라 자바스크립트만 사용하여 아름다운 카운트다운 타이머를 구축하려고 합니다. 저희 카운트다운 타이머가 특정 날짜와 시간까지 남은 시간을 알려드립니다.

구조 만들기

 

우리 모두는 HTML이 웹 개발 프로젝트를 구성하는 데 사용된다는 것을 알고 있습니다.

<main>
        <h1>Time remaining for the Fest</h1>
      <div class="countdown-container">
                <div class="days-c">
                            <p class="big-text" id="days"></p>
          <span>Days</span>
        </div>
        <div class="hours-c">
                    <p class="big-text" id="hours"></p>
          <span>Hours</span>
        </div>
        <div class="minutes-c">
                    <p class="big-text" id="minutes"></p>
          <span>Minutes</span>
        </div>
        <div class="seconds-c">
                    <p class="big-text" id="seconds"></p>
          <span>Seconds</span>
        </div>
      </div>
    </main>

여기에 카운트다운 타이머의 모든 미세 요소를 div 안에 넣어 배경 이미지를 추가하여 타이머에 상자 모양과 아름다운 UI를 부여합니다. 나는 다시

를 분리했다.

타이머 설계

 

이제 우리의 구조는 준비되었으니 카운트다운 타이머에 아름다운 모습을 주기 위해 CSS를 추가하자.

몸, 신체

저는 제 모든 요소들이 화면의 중심이 되고, 화면 전체가 배경색을 띄고, 제가 사용할 것들을 실현하고 싶습니다.

body
{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eeee;
}

(수도가스를 나르는) 본관, (전선 중) 간선

 

여기에 나는 아름다운 배경 이미지와 함께 높이와 25, 30 렘의 아름다운 상자 모양의 구조물을 만들 것이다.

main {
    background: url(https://images.unsplash.com/photo-1646429411544-b735d4c77bb7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80);
                      height: 25rem;
                      width: 30rem;
                      color: white;
                      border-radius: 10px;
                    }

이게 지금 모습입니다.

글꼴 및 크기 수정

 

.countdown-container span {
    margin: 1.5rem;
    font-size: 1rem;
    font-weight: 500;
}
.big-text {
    margin: 1rem;
    font-size: 3rem;
    font-weight: bolder;
    padding: 5px;
}

카운트다운 용기 정렬

.countdown-container {
    padding: 1rem;
    margin: 1rem;
    display: flex;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

 

동적으로 값 추가

이제 스타일링 부분은 끝났으니 타이머 값을 동적으로 추가하고, 이를 위해 자바스크립트를 추가하겠습니다.

비바람을 잡는 것

이제 우리는 가치를 더하기 위해 미세 요소를 잡을 것입니다.

const days = document.getElementById('days')
const hours = document.getElementById('hours')
const minutes = document.getElementById('minutes')
const seconds = document.getElementById('seconds')

 

함수 정의 및 호출

카운트다운 타이머를 만들 때 날짜 객체가 필요하며 욕구 값을 필터링하기 위해 자바스크립트 Math.floor()를 사용할 것이다. 이제 남은 시간을 확보하는 것이 첫 번째 과제다.

//the final date   
    const fest = new Date(2022, 3, 2);
  // the system date   
  const current = new Date();
  //time remianing   
  const sec = (fest - current) / 1000;

2일을 빼면 밀리초 단위의 값이 제공되므로 1000으로 다이빙하여 초 단위의 값을 얻습니다. 이제 일, 시간, 분, 초 단위로 변환해 보겠습니다.

const d = Math.floor(sec / 3600 / 24);
    const hrs = Math.floor(sec / 3600) % 24;
    const min = Math.floor(sec / 60) % 60;
    const s = Math.floor(sec) % 60

    ```

    <div class="content-ad"></div>

    이제 우리는 우리의 값들을 가지게 되었으니, innerText 속성을 사용하여 이것들을 우리의 HTML에 동적으로 추가해 봅시다.

    ```js

days.innerText = d;
    hours.innerText = hrs;
        minutes.innerText = min;
            seconds.innerText = s;

이제 매초 값을 변경하려면 setInterval(핸들러, 밀리섹)을 사용합니다.

정리하면

const days = document.getElementById('days')
const hours = document.getElementById('hours')
const minutes = document.getElementById('minutes')
const seconds = document.getElementById('seconds')
function goCountown() {
  //the final date   
      const fest = new Date(2022, 3, 2);
        // the system date   
          const current = new Date();
            //time remianing   
              const sec = (fest - current) / 1000;
                  const d = Math.floor(sec / 3600 / 24);
                      const hrs = Math.floor(sec / 3600) % 24;
                          const min = Math.floor(sec / 60) % 60;
                              const s = Math.floor(sec) % 60
                                  days.innerText = d;
                                      hours.innerText = hrs;
                                          minutes.innerText = min;
                                              seconds.innerText = s;
                                              }
                                              goCountown()
                                              setInterval(goCountown, 1000)

 

결론

이 기사에서는 CSS flex, JavaScript 날짜 및 Math.floor()와 같은 중요한 주제를 다루었습니다. 저는 이 글이 모든 사람이 웹 개발의 기초 지식을 쌓는 데 도움이 되기를 바랍니다. 당신이 이것을 좋아한다면 자유롭게 댓글을 달고, 리액션하고, 이 글을 공유하세요. 제 글을 읽어주셔서 소중한 시간을 주셔서 감사합니다. 다음 방송을 계속 시청해 주세요. 해피 코딩!

연결하다

트위터
링크드인

PlainEnglish.io에서 더 많은 콘텐츠를 확인하십시오. 무료 주간 뉴스레터에 가입하십시오. Twitter와 LinkedIn에서 저희를 팔로우하세요. 우리 커뮤니티 디스코드에 가입하세요.