JavaScript

신년 2024 카운트 다운 만들기

결과

HTML

<body>
    <div id="year" class="year"></div>
    <h1>New Year Countdown</h1>
    <div id="countdown" class="countdown">
        <div class="time">
            <h2 id="days">00</h2>
            <small>days</small>
        </div>
        <div class="time">
            <h2 id="hours">00</h2>
            <small>hours</small>
        </div>
        <div class="time">
            <h2 id="minutes">00</h2>
            <small>minutes</small>
        </div>
        <div class="time">
            <h2 id="seconds">00</h2>
            <small>seconds</small>
        </div>
    </div>
    <img src="./img/spinner.gif" alt="Loading..." id="loading" class="loading">
</body>

CSS

@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
*{margin: 0; padding: 0; box-sizing: border-box;}
body{
    background: #000;
    height: 100vh;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Russo One', sans-serif;
}
body::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
}
body *{z-index: 1;}
h1{font-size: 60px; margin: 80px 0 40px; letter-spacing: 7px; text-transform: uppercase;}
.year{
    font-size: 200px;
    z-index: -1;
    opacity: .6;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.countdown{
    display: flex;
    transform: scale(2);
}
.time{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 15px;
}

script

const days=document.getElementById('days');
const hours=document.getElementById('hours');
const minutes=document.getElementById('minutes');
const seconds=document.getElementById('seconds');
const year=document.getElementById('year');
const countdown=document.getElementById('countdown');
const loading=document.getElementById('loading');

const currentYear=new Date().getFullYear();
console.log(currentYear)

const newYearTime=new Date(`January 01 ${currentYear + 1} 00: 00: 00`);

year.innerText=currentYear + 1;

function updateCountdown(){
    const currentTime=new Date();
    const diff=newYearTime-currentTime;

    const d=Math.floor(diff/1000/60/60/24);
    const h=Math.floor(diff/1000/60/60) % 24;
    const m=Math.floor(diff/1000/60)%60;
    const s=Math.floor(diff/1000)%60;

    days.innerHTML=d;
    hours.innerHTML= h < 10 ? '0'+ h : h;
    minutes.innerHTML= m < 10 ? '0'+ m : m;
    seconds.innerHTML= s < 10 ? '0'+ s : s;
}
setTimeout(()=>{
    loading.remove();
    countdown.style.display='flex'
},1000)

setInterval(updateCountdown,1000)

#script 01

변수는

  • days : document.getElementById ('days');
  • hours : document.getElementById ('hours');
  • minutes : document.getElementById ('minutes');
  • seconds : document.getElementById ('seconds');
  • year : document.getElementById ('year');
  • countdown : document.getElementById ('countdown');
  • loading : document.getElementById ('loading');
    --여기 까지는 HTML에 해당하는 각 일,시간,분,초,년,카운트다운,로딩에 대한 아이디 선택자이다--
  • currentYear : new Date().getFullYear(); 올해 년도를 나타낸다.
  • newYearTime : new Date(January 01 ${currentYear + 1} 00: 00: 00); 다가올 신년 즉 2024년은
    new Date 1월 1일 기점 + 1년 00시 00분 00초 를 만든다

데이터 상으로는 그렇게 나오지만 실제로 보이는 부분도 그렇게 보여야 하므로 변수 year에 이너텍스트로 +1 을 해준다.

  • year.innerText=currentYear + 1;

여기까지가 아래와 같은 '2024' 년을 만드는 코드이다.

다음은 실제로 2024년까지의 카운팅을 만들게 된다.
함수 updateCountdown를 생성하고 안에 변수를 쓰는데 변수는 다음과 같다.

  • currentTime : new Date();
  • diff : newYearTime-currentTime; ( 현재 년도 - 2024년 )
  • d : Math.floor(diff/1000/60/60/24);
  • h : Math.floor(diff/1000/60/60) % 24;
  • m : Math.floor(diff/1000/60)%60;
  • s : Math.floor(diff/1000)%60;
    Math.floor (소수점 나머지 버림) 을 사용하고 diff값은 아래와 같이 millisecond로 나온다.

    풀이 하자면 29,465,921.610초가 남았다는 값이다. 여기서 / 1000 을 해주면 의 값이 나오고
  • : 29,465,921 초 에서 우리는 카운트다운을 60초 만 보면되므로 %60 (60을 나눈 나머지 값만) 나오게 하면된다.
  • : 초에서 계산한거에서 / 60
  • : 분에서 계산한거에서 / 60 에서 %24 (24를 나눈 나머지 값)
  • : 29,465,921 초 / 1000 / 60 / 60 / 24
    를 하여 각 변수에 담아둔다.
days.innerHTML=d;
hours.innerHTML= h < 10 ? '0'+ h : h;
minutes.innerHTML= m < 10 ? '0'+ m : m;
seconds.innerHTML= s < 10 ? '0'+ s : s;

각 날 , 시 , 분 , 초 를 innerHTML로 넣어주고 시 , 분 , 초 부터는 삼항연산자를 넣는다. 왜냐하면 2자릿수 일 때는 괜찮지만 1자릿수 일 때는 앞'0'이 비워지기 때문에 삼항연산자 조건식을 만든다. 10보다 작을 때는 '0'을 넣고 아니면 그대로 출력하라는 조건식이다.

setTimeout(()=>{
    loading.remove();
    countdown.style.display='flex'
},1000)

setTimeout이 1초동안 지연되고 loadingremove가 되고 countdown의 스타일이 display='flex'가 된다.
마지막
setInterval(updateCountdown,1000) 을 써주는데 이는 위에 작성한 함수 updateCountdown를 1초마다 반복적으로 나타나게 하기 위함이다. 꼭 써주어야한다.

0개의 댓글