<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript for frontend developer</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="num_animation" data-rate="200">0</div>
<div class="num_animation" data-rate="100">0</div>
<div class="num_animation" data-rate="80">0</div>
<div class="num_animation" data-rate="40">0</div>
<script src="script.js"></script>
</body>
</html>
.num_animation {
width: 100px;
padding: 20px;
background-color: #efca66;
font-size: 3em;
margin: 0 auto;
/* border: 1px solid white; */
text-align: center;
color: white;
}
.num_animation:nth-child(2) {
background-color: #ecdab9;
}
.num_animation:nth-child(3) {
background-color: #cec3c8;
}
.num_animation:nth-child(4) {
background-color: #909cac;
}
const numAnimation = document.querySelectorAll(".num_animation");
function changeNum(index) {
let num = 0;
let targetNum = numAnimation[index].getAttribute("data-rate"); //index에 따르는 data-rate속성 각각 가져오기
//setInterval(할일, 시간)
let timer = setInterval(function () {
++num;
numAnimation[index].innerHTML = num; //화면에 표기
if (num == targetNum) { //targetNum에 도달하면 setInterval 중지
clearInterval(timer);
}
}, 10)
}
for (let i = 0; i < numAnimation.length; i++) { //changeNum()함수 실행
changeNum(i)
}'웹 개발 > 바닐라js' 카테고리의 다른 글
| [따라만들기] 간트 차트 (0) | 2022.03.02 |
|---|---|
| [따라만들기] menu hover animation (0) | 2022.03.02 |
| [따라만들기] multiple slider (0) | 2022.02.20 |
| [따라만들기] cookie popup (0) | 2022.02.20 |
| [따라만들기] Hover Animation (0) | 2022.02.20 |
[따라만들기] number auto animation