【发布时间】:2020-08-24 09:50:46
【问题描述】:
我有一段代码在用户滚动到它时开始递增。 sn-p 代码不是我的。作者是大卫·雷斯。但这与我所做的非常相似。
var a = 0;
$(window).scroll(function() {
var oTop = $('#counter').offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$('.counter-value').each(function() {
var $this = $(this),
countTo = $this.attr('data-count');
$({
countNum: $this.text()
}).animate({
countNum: countTo
},
{
duration: 2000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
//alert('finished');
}
});
});
a = 1;
}
});
.fake-div {
width: 100%;
height: 1280px;
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="fake-div">
</div>
<div id="counter">
<div class="counter-value" data-count="300">0</div>
<div class="counter-value" data-count="400">100</div>
<div class="counter-value" data-count="1500">200</div>
</div>
<div class="fake-div">
</div>
但最后,当它完成时,我希望他们在它的末尾有一个“+”。
例如,我希望最终结果类似于以下数字:
300+
400+
1500+
【问题讨论】:
-
console.log(300 + "+") -
但这只会在控制台中打印出来。
-
重点是 JavaScript
+操作符“首选”字符串,所以如果将字符串“添加”到数字,结果就是字符串。
标签: javascript html css increment auto-increment