형님들 자바스크립트 질문드립니다.
본문
위에같이 카운터가 올라가는 코드인데 첫번째 (누적매출 뒤에 115억) , 네번째 (창업만족도 뒤에 %) 두개만 따로 붙이려고 하는데 어디서 어떤 코드를 수정해야 될까요? ㅠㅠ 꼭좀 부탁드립니다..
<style> .counter { font-size: 30px; font-weight: 800; } .plus { color: red; font-size: 30px; font-weight: 800; } </style> <script> function animateCounter(id, endValue) { let startValue = 0; const duration = 2000; const stepTime = duration / 100; const counter = document.getElementById(id); const valueIncrement = endValue / 100; const interval = setInterval(() => { startValue += valueIncrement; counter.innerHTML = Math.round(startValue).toLocaleString() + '<span class="plus">+</span>'; if (startValue >= endValue) { clearInterval(interval); counter.innerHTML = endValue.toLocaleString() + '<span class="plus">+</span>'; } }, stepTime); } animateCounter("counter1", 56320);
답변 2
'<span class="plus">+</span>'
이 부분을 id 에 따라서 다르게 하면 될 듯 하네요.
자세히 알려주시면 안될까요? 완전 초짜라..ㅠㅠ
<style>
.counter { font-size: 30px; font-weight: 800; } .plus { color: red; font-size: 30px; font-weight: 800; }
</style>
<div>
<div class="counter on" data-endvalue="56320" data-startvalue="115">115</div>
<div class="counter">60<span class="plus">+</span></div>
<div class="counter">1558<span class="plus">+</span></div>
<div class="counter on" data-endvalue="95" data-startvalue="10">90</div>
</div>
<script>
function animateCounter(sel) {
const counters = document.querySelectorAll(sel);
counters.forEach((el) => {
let startValue = el.dataset.startvalue ? Number(el.dataset.startvalue) : 0;
const duration = 2000;
const stepTime = duration / 100;
const counter = el;
const endValue = el.dataset.endvalue ? Number(el.dataset.endvalue) : 0;
const valueIncrement = endValue / 100;
const interval = setInterval(() => {
startValue += valueIncrement;
counter.innerHTML = Math.round(startValue).toLocaleString() + '<span class="plus">+</span>';
if (startValue >= endValue) {
clearInterval(interval);
counter.innerHTML = endValue.toLocaleString() + '<span class="plus">+</span>';
}
}, stepTime);
});
}
animateCounter(".counter.on");
</script>
