본문 바로가기
JavaScript

카운트 다운 타이머 만들기

by 왜안돼요 2024. 1. 10.
728x90

카운트다운 타이머 만들기

내가 지정한 날짜만큼 카운트 다운을 해준다 

d-day가 되면 d-day라는 텍스트가 뜸

 

HTML

<div class="container">
      <div class="title">COUNT DOWN</div>
      <p data-confetti="true">
        D-DAY!
      </p>
      <div id="date">
        <div id="day">
          <span class="d">00</span>
          <span>DAY</span>
        </div>
        <div id="hours">
          <span class="h">00</span>
          <span>HOURS</span>
        </div>
        <div id="minutes">
          <span class="m">00</span>
          <span>MINUTES</span>
        </div>
        <div id="seconds">
          <span class="s">00</span>
          <span>SECONDS</span>
        </div>
      </div>
      <div class="time">
        <input type="datetime-local" id="user-input" />
      </div>

      <div class="btnWrap">
        <button id="start">시작</button>
        <button id="stop">정지</button>
        <button id="reset">재설정</button>
      </div>


      <div class="footer">
        © 2023. <a href="https://ozcodingschool.com/" target="_blank">ozcodingschool</a>. All rights
        reserved. Developed by <a href="#">[수강생이름]</a>.
      </div>
    </div>

 

CSS

 

@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Francois+One&family=Luckiest+Guy&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Nanum+Gothic&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Playfair+Display:wght@400;500;600;700;800;900&family=Rubik+Bubbles&display=swap');
@font-face {
  font-family: 'LOTTERIACHAB';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/LOTTERIACHAB.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GmarketSansMedium';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

*{
  margin: 0;
  padding: 0;
}

a{
  text-decoration: none;
}

body{
  width: 100%;
  background-color: rgb(26, 26, 26);
  font-family: 'GmarketSansMedium';
}

.container{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.title{
  font-size: 100px;
  color: white;
  font-family: 'LOTTERIACHAB';
  font-weight: bold;
}

p{
  color: white;
  font-size: 30px;
  display: none;
}

#date{
  width: 1440px;
  height: 400px;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  font-family: 'LOTTERIACHAB';
}

#day,#hours,#minutes,#seconds{
  width: 330px;
  height: 100%;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
}

#day{
  /* background: rgba( 255, 255, 255, 0.15 ); */
box-shadow: 0 8px 32px 0 #694aff33;
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
  background-color:#694aff ;
}
#hours{
  box-shadow: 0 8px 32px 0 #ff80ee33;
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
  background-color:#ff80ee ;
}
#minutes{
  box-shadow: 0 8px 32px 0 #ff550033;
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
  background-color:#ff5500 ;
}
#seconds{
  box-shadow: 0 8px 32px 0 #06df7233;
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
  background-color:#06df72 ;
}

.d,.h,.m,.s{
  font-size: 10rem;
}

span{
  font-size: 16px;
}

.btnWrap{
  margin-top: 6px;
  
}


#start,#stop,#reset{
  width: 100px;
  height: 50px;
  margin-left: 10px;
  color: white;
  cursor: pointer;
  font-family: 'GmarketSansMedium';
}

#start{
  box-shadow: 0 8px 32px 0 #694aff33;
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
  background-color:#694aff ;
}

#stop{
  box-shadow: 0 8px 32px 0 #ff80ee33;
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
    background-color:#ff80ee ;
}

#reset{
  box-shadow: 0 8px 32px 0 #06df7233;
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
    background-color:#06df72 ;
}

#start:hover{
  box-shadow: 0 8px 32px 0 #694aff33;
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
  background-color:#5e42e7 ;
}

#stop:hover{
  box-shadow: 0 8px 32px 0 #ff80ee33;
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
    background-color:#ea75db ;
}


#reset:hover{
  box-shadow: 0 8px 32px 0 #06df7233;
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
    background-color:#06c968 ;
}


#user-input{
  padding: 6px;
  margin-bottom: 5px;
  box-shadow: 0 8px 32px 0 #ff550033;
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
    background-color:#ff5500 ;
    color: white;
}

뭔가 달력 넘기는 느낌을 주고싶었ㄴ지만,, 그건 나의 부족으로 못함

 

JS

나는,, 내 코드 작성하기 바쁘지 설명을 정말 못한다,,,

 

let intervalId, future;

intervalId는 setInterval 함수를 제어하는 변수 

future는 사용자가 입력한 시간을 저장하기 위한 변수

 

function updateTimer() {
  const now = new Date();
  const diff = future - now;

  if (diff <= 0) {
    document.querySelector(".d").textContent = '00';
    document.querySelector(".h").textContent = '00';
    document.querySelector(".m").textContent = '00';
    document.querySelector(".s").textContent = '00';
    document.querySelector("p").style.display = "block";

    
  } else {
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const secs = Math.floor((diff % (1000 * 60)) / 1000);

    document.querySelector(".d").textContent = days;
    document.querySelector(".h").textContent = hours;
    document.querySelector(".m").textContent = mins;
    document.querySelector(".s").textContent = secs;
  }
}

updateTimer 함수는 현재 시간과 미래시간의 시간 차이를 계산하고 계산한 값을 일/시/분/초 단위로 화면에 표시해준다

시간차가 0이하인 경우에는 카운트 다운이 끝났음을 알리는 메세지를 보여준다

 

document.getElementById('start').addEventListener('click', function () {
  const userInput = document.getElementById('user-input').value;
  future = new Date(userInput);
  intervalId = setInterval(updateTimer, 1000);
});

스타트 버튼을 클릭하면 사용자가 입력한 시간을 userInput에 저장하고 updateTimer 함수를 1초마다 호출함 

 

document.getElementById('stop').addEventListener('click', function () {
  clearInterval(intervalId);
});

스탑 버튼을 클릭하면 카운트 다운 중지

 

document.getElementById('reset').addEventListener('click', function () {
  clearInterval(intervalId);
  document.querySelector(".d").textContent = '00';
  document.querySelector(".h").textContent = '00';
  document.querySelector(".m").textContent = '00';
  document.querySelector(".s").textContent = '00';

  document.querySelector("p").style.display = "none";
});

리셋 버튼을 클릭하면 카운트 다운을 중지하고 시간을 초기화 한다. 

 

분명 코드 작성할때는 되게 어려웠는데,,,,,,,,,,,,,, 이렇게 보니까 별거 없는듯,,, 왜지,,,,, 

전체코드

let intervalId;
let future;

function updateTimer() {
  const now = new Date();
  const diff = future - now;

  if (diff <= 0) {
    document.querySelector(".d").textContent = '00';
    document.querySelector(".h").textContent = '00';
    document.querySelector(".m").textContent = '00';
    document.querySelector(".s").textContent = '00';
    document.querySelector("p").style.display = "block";

    
  } else {
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const secs = Math.floor((diff % (1000 * 60)) / 1000);

    document.querySelector(".d").textContent = days;
    document.querySelector(".h").textContent = hours;
    document.querySelector(".m").textContent = mins;
    document.querySelector(".s").textContent = secs;
  }
}

document.getElementById('start').addEventListener('click', function () {
  const userInput = document.getElementById('user-input').value;
  future = new Date(userInput);
  intervalId = setInterval(updateTimer, 1000);
});

document.getElementById('stop').addEventListener('click', function () {
  clearInterval(intervalId);
});

document.getElementById('reset').addEventListener('click', function () {
  clearInterval(intervalId);
  document.querySelector(".d").textContent = '00';
  document.querySelector(".h").textContent = '00';
  document.querySelector(".m").textContent = '00';
  document.querySelector(".s").textContent = '00';

  document.querySelector("p").style.display = "none";
});

 

결과

 

'JavaScript' 카테고리의 다른 글

미니 프로젝트 - 아이스크림 퀴즈 만들기  (1) 2024.01.22
Carousel 구현하기  (1) 2024.01.10

관련글

최근댓글

최근글

skin by © 2024 ttuttak

티스토리툴바