HTML
<body>
<div class="counter-container">
<i class="fa-brands fa-html5 fa-3x"></i>
<div class="counter" data-target="12000"></div>
<span>HTML STUDY </span>
</div>
<div class="counter-container">
<i class="fa-brands fa-css3-alt fa-3x"></i>
<div class="counter" data-target="8000"></div>
<span>CSS STUDY </span>
</div>
<div class="counter-container">
<i class="fa-brands fa-js-square fa-3x"></i>
<div class="counter" data-target="15000"></div>
<span>JavaScript STUDY</span>
</div>CSS
.counter-container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
margin: 30px 50px;
}
.counter{
font-size: 60px;
margin-top: 10px;
}
@media (max-width:580px) {
body{
flex-direction: column;
}
}JS
-
couner클래스들을 querySelectorAll로 가져오기
-
1번의 가져온 counters들을 forEach해서 각각 innerText 넣어주기
-
updateCounter()함수 생성
3-1. update해주는 target을 잡아주기
3-2. counter.innerText를 더해주는 변수 생성
3-3. 증가되는 속도 계산const target = counter.getAttribute("data-target"); console.log(typeof target, target);
data-target을 string으로 받고있네! 그렇다면 Number를 해주지않아도,
const target = +counter.getAttribute("data-target"); console.log(typeof target, target);
'+'기호로 type이 number로 바뀐것을 알게됨
-
c가 target보다 작을경우 counter.innerText 그리기
-
setTimeout 으로 updateCounter를 불러주기
const counters = document.querySelectorAll(".counter");
counters.forEach((counter) => {
counter.innerText = "0";
const updateCounter = () => {
const target = +counter.getAttribute("data-target");
// console.log(typeof target, target);
const c = +counter.innerText;
const increment = +target / 300; //일단 200으로 나눠보자 숫자가 커질수록
//예를들면 1000이면 10분의1속도니가 엄청느려짐
if (c < target) {
counter.innerText = `${Math.ceil(c + increment)}`;
setTimeout(updateCounter, 1);
} else {
counter.innerText = target;
}
};
updateCounter();
});
- 숫자를 변경하고싶다면, HTML의 data-target을 변경해주기.
- 증가되는 속도를 target 을 기준으로 특정숫자로 나눴기에 data-target값이 아무리 크더라도, 똑같은 속도로 보인다!
구현 후 느낀점
메인페이지에 넣으면 간단한 코드로 인터렉티브한 웹을 표현할 수 있을것같다!
아직 코드 이해가 잘되지않지만, 더 공부해봐야겠다!
프론트엔드 개발자 항상 뭘 하고있는 슬링