애니메이션 숫자 카운터의 쉼표 배치
저는 각 숫자 옆에 기호(+, % 등)가 있는 스크롤 애니메이션 숫자 카운터를 제공하는 HTML, CSS 및 JavaScript의 다양한 조합을 시도해 왔습니다. 마침내 올바른 조합을 찾았지만 아직 완벽하지는 않습니다. 1,000 이상의 숫자에 쉼표를 추가하고 싶지만 HTML에 쉼표를 추가하면 NaN 출력이 생성됩니다. 저는 JavaScript를 처음 접했고 쉼표를 표시하기 위해 현재 코드에서 무엇을 추가하거나 수정해야 할지 모르겠습니다.
누가 내 현재 코드를 다시 작성하여 쉼표를 표시하거나 이 작업을 수행하는 방법을 안내해 줄 수 있나요? 어떤 도움이라도 정말 감사하겠습니다!
<script>
function inVisible(element) {
//Checking if the element is
//visible in the viewport
var WindowTop = $(window).scrollTop();
var WindowBottom = WindowTop + $(window).height();
var ElementTop = element.offset().top;
var ElementBottom = ElementTop + element.height();
//animating the element if it is
//visible in the viewport
if ((ElementBottom <= WindowBottom) && ElementTop >= WindowTop)
animate(element);
}
function animate(element) {
//Animating the element if not animated before
if (!element.hasClass('ms-animated')) {
var maxval = element.data('max');
var html = element.html();
element.addClass("ms-animated");
$({
countNum: element.html()
}).animate({
countNum: maxval
}, {
//duration 2 seconds
duration: 2000,
easing: 'linear',
step: function() {
element.html(Math.floor(this.countNum) + html);
},
complete: function() {
element.html(this.countNum + html);
}
});
}
}
//When the document is ready
$(function() {
//This is triggered when the
//user scrolls the page
$(window).scroll(function() {
//Checking if each items to animate are
//visible in the viewport
$("h2[data-max]").each(function() {
inVisible($(this));
});
})
});
</script>