프로그래밍 「 자바스크립트 편」HTML 및 JavaScript를 사용한 간단한 카운트 다운 타이머

안녕하세요 코더입니다! Codewithrandom 블로그에 오신 것을 환영합니다, 우리는 HTML, CSS 및 자바 스크립트를 사용하여 카운트 다운 타이머를 만드는 방법을 배웁니다. 카운트다운 타이머는 특정 순간에 시작하여 0으로 내려갑니다. 중요한 이벤트가 다가오거나 게임에 몇 초가 남았을 때 상황에 대한 흥분이나 긴박감을 높이는 데 자주 사용됩니다.

카운트다운 타이머가 사용되는 상황에는 이벤트, 프레젠테이션, 게임, 심지어 시간 관리를 위한 일상 생활과 같은 다양한 상황이 있습니다.
카운트다운 타이머는 사용자가 생산성을 높이고 보다 효율적으로 작업할 수 있도록 도와줍니다.

카운트 다운 타이머 프로젝트는 항상 시간, 분, 초를 계산하기 위해 경주 또는 수영 경주와 같이 시간이 가장 중요한 곳에서 보았지만 일, 시, 분 및 초를 계산하는 기능을 수행하기 때문에 카운트 다운은 특별합니다. 이제 카운트다운 타이머를 만들어 보겠습니다.

블로그가 마음에 드셨으면 좋겠으니 카운트다운 타이머의 기본 HTML 구조부터 시작하겠습니다.

카운트 다운 타이머 HTML 코드 : -

<div class="container">
<h1 id="headline">Countdown to my birthday</h1>
<div id="countdown">
<ul>
<li><span id="days"></span>days</li>
<li><span id="hours"></span>Hours</li>
<li><span id="minutes"></span>Minutes</li>
<li><span id="seconds"></span>Seconds</li>
</ul>
</div>
<div id="content" class="emoji">
<span>🥳</span>
<span>🎉</span>
<span>🎂</span>
</div>
</div>

카운트다운 타이머를 위한 컨테이너를 만들기 위해 div 태그와 클래스 "container"를 사용합니다. 카운트다운 타이머의 방향은 <h1> 태그를 사용하여 만들어집니다. 이제 일, 시, 분, 초 단위로 카운트다운하는 타이머를 만들어 보겠습니다. unorderlist를 활용하여 카운트다운을 진행합니다.

이제 "emoji" 클래스가 새 div 태그에 추가됩니다. 다른 이모티콘에 대한 다른 span 태그에 대해 세 개의 고유한 태그를 만듭니다.

카운트다운 타이머의 경우 모든 HTML 코드가 있습니다. 현재 JavaScript 및 CSS는 출력에 없습니다. 카운트다운 타이머의 스타일링은 CSS로 이루어지며 그 기능은 JavaScript로 이루어집니다.

HTML 코드 출력 :

카운트 다운 타이머 Css 코드 : -

/* general styling */
:root {
--smaller: .75;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
margin: 0;
}
body {
align-items: center;
background-color: #ffd54f;
display: flex;
font-family: -apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Oxygen-Sans,
Ubuntu,
Cantarell,
"Helvetica Neue",
sans-serif;
}
.container {
color: #333;
margin: 0 auto;
text-align: center;
}
h1 {
font-weight: normal;
letter-spacing: .125rem;
text-transform: uppercase;
}
li {
display: inline-block;
font-size: 1.5em;
list-style-type: none;
padding: 1em;
text-transform: uppercase;
}
li span {
display: block;
font-size: 4.5rem;
}
.emoji {
display: none;
padding: 1rem;
}
.emoji span {
font-size: 4rem;
padding: 0 .5rem;
}
@media all and (max-width: 768px) {
h1 {
font-size: calc(1.5rem * var(--smaller));
}
li {
font-size: calc(1.125rem * var(--smaller));
}
li span {
font-size: calc(3.375rem * var(--smaller));
}
}

• 이 코드에서는 body 태그 선택기를 사용하여 모든 여백과 패딩 재설정에 대해 상자 크기를 "border-box"로 설정합니다. 또한 여백을 "0"으로 설정하고 우리 몸의 배경색을 "노란색"으로 설정합니다.
• 또한 디스플레이에 "inline-block"을 사용하고 LI 태그 선택기를 사용하여 글꼴 크기를 1.5EM로 사용합니다.

이것은 카운트 다운 타이머의 모든 Css 코드입니다. 다음은 Html + Css로 업데이트 된 출력입니다.

CSS 출력:

카운트 다운 타이머 자바 스크립트 코드 : -

(function () {
const second = 1000,
minute = second * 60,
hour = minute * 60,
day = hour * 24;
//I'm adding this section so I don't have to keep updating this pen every year :-)
//remove this if you don't need it
let today = new Date(),
dd = String(today.getDate()).padStart(2, "0"),
mm = String(today.getMonth() + 1).padStart(2, "0"),
yyyy = today.getFullYear(),
nextYear = yyyy + 1,
dayMonth = "05/29/",
birthday = dayMonth + yyyy;
today = mm + "/" + dd + "/" + yyyy;
if (today > birthday) {
birthday = dayMonth + nextYear;
}
//end
const countDown = new Date(birthday).getTime(),
x = setInterval(function() {
const now = new Date().getTime(),
distance = countDown - now;
document.getElementById("days").innerText = Math.floor(distance / (day)),
document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);
//do something later when date is reached
if (distance < 0) {
document.getElementById("headline").innerText = "It's my birthday!";
document.getElementById("countdown").style.display = "none";
document.getElementById("content").style.display = "block";
clearInterval(x);
}
//seconds
}, 0)
}());

코드는 dayMonth라는 변수를 선언하는 것으로 시작합니다. 이 변수의 값은 "09/30/"입니다. 즉, 월은 30월이고 연도는 09입니다. 다음으로 birthday라는 변수를 선언합니다. 이 변수의 값은 "30/2015/<>"입니다.

그런 다음 현재 날짜와 시간뿐만 아니라 생일부터 지금(현재 시간)까지 카운트다운하는 간격을 저장하는 데 사용할 today라는 또 다른 변수를 선언합니다. 그런 다음 setInterval() 함수로 간격을 만들어 매초마다 생일이 생성된 후 며칠, 몇 시, 몇 분 또는 초가 지났는지 텍스트 요소를 업데이트할 수 있습니다.

이 코드는 주어진 날짜까지의 시간을 계산하는 데 사용됩니다. 코드는 "09/30/"로 설정된 today라는 변수를 선언하는 것으로 시작합니다. 다음으로 dayMonth + yyyy로 설정된 birthday라는 또 다른 변수를 선언합니다. 그런 다음 오늘을 계산하여 mm + "/" + dd + "/" + yyyy로 설정합니다. 마지막으로, 오늘이 생일> 경우 프로그램은 생일을 dayMonth + nextYear로 설정합니다.

Html 및 JavaScript 코드를 사용한 카운트 다운 타이머의 최종 출력 : -

이제 카운트다운 타이머를 완료했습니다. Html 및 Css JavaScript로 업데이트된 출력입니다. 카운트 다운 타이머 프로젝트가 마음에 드셨기를 바랍니다. 출력 비디오 및 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오.