안녕하세요. 혀코입니다.
이번 시간에는 JavaScript를 사용해서 2021 신년 D-day 카운트다운 프로그램을 작성해보도록 하겠습니다.
기준이 되는 D-day는 신년 2021년 1월 1일로 설정하고 카운트다운을 세어보도록 하겠습니다.
HTML 파일, CSS 파일 그리고 JavaScript 파일을 다음과 같이 준비합니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Years Countdown</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="black-overlay"></div>
<div class="container">
<h1>New Years 2021</h1>
<div class="countdown">
<div>
<p class="count-text" id="days">0</p>
<span>days</span>
</div>
<div>
<p class="count-text" id="hours">0</p>
<span>hours</span>
</div>
<div>
<p class="count-text" id="minutes">0</p>
<span>minutes</span>
</div>
<div>
<p class="count-text" id="seconds">0</p>
<span>seconds</span>
</div>
</div>
</div>
</body>
</html>
style.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: url('background.jpg');
background-size: cover;
width: 100%;
height: 100%;
font-family: "Magun Gothic", sans-serif;
position: relative;
}
.black-overlay {
display: block;
position: absolute;
background-color: black;
width: 100%;
height: 100vh;
opacity: 0.7;
z-index: 1;
}
.container{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
text-align: center;
z-index: 2;
padding-top: 2rem;
}
h1 {
font-size: 3rem;
}
.countdown {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 4rem;
}
.countdown .count-text {
font-size: 4rem;
margin: 1rem 2rem;
}
.countdown span {
font-size: 1.5rem;
}
@media (min-width: 576px) {
h1 {
font-size: 3rem;
}
.countdown .count-text {
font-size: 4rem;
}
}
@media (min-width: 768px) {
.container {
padding-top: 12rem;
}
.countdown {
flex-direction: row;
}
h1 {
font-size: 4rem;
}
.countdown .count-text {
font-size: 6rem;
margin: 1rem 3rem;
}
}
@media (min-width: 992px) {
.container {
padding-top: 12rem;
}
h1 {
font-size: 5rem;
}
.countdown .count-text {
font-size: 8rem;
margin: 2rem 3rem;
}
}
@media (min-width: 1200px) {
.container {
padding-top: 12rem;
}
h1 {
font-size: 5rem;
}
.countdown .count-text {
font-size: 8rem;
margin: 2rem 4rem;
}
}
background-image를 사용해 넣었고, background-size: cover로 지정해서 화면에 꽉 차고 나머지는 crop되도록 했으며, background-position: center center로 지정해서 이미지 가운데를 센터로 설정했습니다.
글자와 배경화면의 색깔 대비를 위해, black-overlay div를 하나 만들고 배경색을 검정색으로 지정해서 투명도를 적용해서 사용했습니다.
글자는 display: flex를 주고 flex-direction, align-items, justify-content로 중앙 정렬했습니다.
반응형 웹사이트로 브라우저의 가로 길이에 따라 컨텐츠가 가독성있게 보여질 수 있도록 media query를 사용했습니다.
브라우저 호환성을 위해, IE11에서도 최적화 되었습니다.
script.js
const newYears = '1 jan 2021';
function countdown() {
const newYearsDate = new Date(newYears);
const currentDate = new Date();
const totalSeconds = (newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const minutes = Math.floor(totalSeconds / 60) % 60;
const seconds = Math.floor(totalSeconds) % 60;
document.getElementById('days').innerText = formatTime(days);
document.getElementById('hours').innerText = formatTime(hours);
document.getElementById('minutes').innerText = formatTime(minutes);
document.getElementById('seconds').innerText = formatTime(seconds);
}
function formatTime(time) {
return time < 10 ? '0' + time : time;
}
setInterval(countdown, 1000);
그리고 JavaScript로 각 id를 잡아서 D-day 계산 결과를 setTimeout을 이용해 1초마다 데이터를 바꿔줬습니다.
formatTime 함수로 10초보다 작은 수 앞에 0을 붙여줬습니다.
카운트다운 프로그램에 사용된 이미지는 다음 이미지를 사용했습니다.
결과는 다음과 같습니다.
이렇게 JavaScript를 사용해서 2021 신년 D-day 카운트다운 프로그램을 완성했습니다.
유용하셨다면, 공감과 구독 부탁 드립니다.
감사합니다. :)
댓글