<div class="count">0</div>
.count {
width: 370px;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-weight: bold;
background: #febf00;
border-radius: 1rem;
color: #000;
}
/* ----------- */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
word-break: break-all;
font-family: Pretendard;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
const counter = ($counter, max) => {
let now = max;
const handle = setInterval(() => {
$counter.innerHTML = Math.ceil(max - now);
// 목표수치에 도달하면 정지
if (now < 1) {
clearInterval(handle);
}
// 증가되는 값이 계속하여 작아짐
const step = now / 10;
// 값을 적용시키면서 다음 차례에 영향을 끼침
now -= step;
}, 50);
}
window.onload = () => {
// 카운트를 적용시킬 요소
const $counter = document.querySelector(".count");
// 목표 수치
const max = 17249;
setTimeout(() => counter($counter, max), 2000);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.