형님들 자바스크립트 질문드립니다.

형님들 자바스크립트 질문드립니다.

QA

형님들 자바스크립트 질문드립니다.

답변 2

본문

2949574522_1709698070.7135.jpg

 

위에같이 카운터가 올라가는 코드인데 첫번째 (누적매출 뒤에 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


<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>

'<span class="plus">+</span>' 

이 부분을 id 에 따라서 다르게 하면 될 듯 하네요.

답변을 작성하시기 전에 로그인 해주세요.
전체 2
© SIRSOFT
현재 페이지 제일 처음으로