Question

我想用动画来计算一个数字。我有一个HTML代码，我在其中设置数字和一个计算这个数字的函数。问题是我有一个数字95%，后面有一个百分比字符。但该函数删除了这个字符。你有什么想法吗？

＆＃13;

var fired = 0;
$(document).ready(function () {
	if(fired === 0) {
		$('.count').each(function () {
			$(this).prop('Counter',0).animate({
				Counter: $(this).text()
			   	}, {
			   	duration: 3000,
			   	easing: 'swing',
			   	step: function (now) {
			   	$(this).text(Math.ceil(now));
			   	}
			});
		});
		fired = 1; //Only do scroll function once
	}
});

＆＃13;

.count {
    font-size: 50px;
    margin-bottom: 10px;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
    padding-top: 15px;
}
#counter {
    float: left;
    display: block;
    width: 28.71111111%;
    text-align: center;
    padding: 0 30px;
}
#counter h3 {
    font-size: 1.2em;
    font-weight: 100;
    text-transform: uppercase;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter">
	<h3>
		<span class="count customer-satisfaction">95%</span>
		Customer Satisfaction
	</h3>
</div>

＆＃13;

Answer 1

这是因为$(this).text(Math.ceil(now))在插入数字之前会清除<span class="count">，如果您告诉函数将%添加到数字中，那么：$(this).text(Math.ceil(now) + '%');它会就像你想要它一样。

OP的评论更新

事实证明，有多个<span class="count">停止了原来的答案。添加

if ($(this).hasClass('customer-satisfaction')) { 
    $(this).text(Math.ceil(now) + '%'); 
} else { 
    $(this).text(Math.ceil(now)); 
}

%只会添加到正确的号码，而不是全部。

＆＃13;

var fired = 0;
$(document).ready(function () {
	if(fired === 0) {
		$('.count').each(function () {
			$(this).prop('Counter',0).animate({
				Counter: $(this).text()
			   	}, {
			   	    duration: 3000,
			      	easing: 'swing',
			    	step: function (now) {
			    	if ($(this).hasClass('customer-satisfaction')) { 
                        $(this).text(Math.ceil(now) + '%'); 
                    } else { 
                        $(this).text(Math.ceil(now)); 
                    }
			   	}
			});
		});
		fired = 1; //Only do scroll function once
	}
});

＆＃13;

.count {
    font-size: 50px;
    margin-bottom: 10px;
    font-weight: 900;
    text-transform: uppercase;
    display: block;
    padding-top: 15px;
}
#counter {
    float: left;
    display: block;
    width: 28.71111111%;
    text-align: center;
    padding: 0 30px;
}
#counter h3 {
    font-size: 1.2em;
    font-weight: 100;
    text-transform: uppercase;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="counter">
	<h3>
		<span class="count customer-satisfaction">95%</span>
		Customer Satisfaction
	</h3>
</div>

＆＃13;

Answer 2

CSS解决方案：

如果你想通过CSS将它们添加到所有计数中，你可以这样做：

.count:after{content: '%'}

如果您只想实现客户满意度，可以这样做：

.customer-satisfaction:after{content: '%'}

用动画计算数字

2 个答案: