[JS] 숫자 카운트 애니메이션

Study/Publishing

[JS] 숫자 카운트 애니메이션

Hemon_ 2024. 2. 2. 10:54

728x90

숫자가 자동으로 카운트 되는 애니메이션

Html & CSS

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>숫자 카운트</title>
    <style>
        .num_animation{
            width: 100px;
            padding: 20px;
            font-size: 3em;
            margin: 0 auto;
            border: 1px solid;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="num_animation" data-rate="90">0</div>
</body>
</html>

먼저 숫자를 적을 html 요소를 불러온다.

var numAnimation = document.querySelector('.num_animation');
var targetNum = numAnimation.getAttribute('data-rate');

올라가는 카운팅을 할 변수도 선언한다

var num = 0;

setInterval을 사용하여 숫자가 올라가는 함수를 작성한다.

targetNum으로 data-rate를 가져와서 사용하는 이유는 유지보수에 용이하도록 하기 위함이다.

나중에 html만 수정해도 스크립트는 수정 안할 수 있게 변수로 사용해야 한다.

var timer = setInterval(function(){
	++num;
	numAnimation.innerText = num;
	if(num == targetNum){
		clearInterval(timer);
	}
}, 10);

728x90

LIST