결과
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(
다가올 신년 즉 2024년은January 01 ${currentYear + 1} 00: 00: 00
);
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초동안 지연되고loading
이remove
가 되고countdown
의 스타일이display='flex'
가 된다.
마지막
setInterval(updateCountdown,1000)
을 써주는데 이는 위에 작성한 함수updateCountdown
를 1초마다 반복적으로 나타나게 하기 위함이다. 꼭 써주어야한다.