gpt4 book ai didi

jquery - 结合 2 个不同的计数代码来创建一个特定的结果

转载 作者:行者123 更新时间:2023-11-28 02:38:20 26 4
gpt4 key购买 nike

首先,我为问题的构架道歉。就我的编码技能而言,我是一个婴儿。

我正试图在我的 Squarespace 网站上实现一个计数序列,到目前为止我已经到达这里(下面的代码)。现在我正在尝试以符合

的方式设置此代码
<div class="sqs-col sqs-col-4 counter-value" data-count="179" data-desc="Days completed">0</div> 

我不想手动输入数据计数值,而是想计算自公司成立之日起经过的天数。类似于发现的东西 here .一旦计算出来,计数序列就会将该数字视为数据计数值。

现在我在论坛和不同的网站上看到了各种计数计时器代码,但是,还没有成功地将它与我这里的代码集成在一起。

如有任何帮助,我们将不胜感激。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var a = 0;
$(window).on('load', 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: 5000,
easing: 'swing',
step: function() {
$this.text(Math.floor(this.countNum));
},
complete: function() {
$this.text(this.countNum);
}
});
});
a = 1;
}
});
</script>
<div id="counter">
<div class="sqs-col sqs-col-4 counter-value" data-count="179" data-desc="Days completed">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="437" data-desc="Projects Executed">0</div>
<div class="sqs-col sqs-col-4 counter-value" data-count="31" data-desc="Satisfied Clients">0</div>
</div>


<style>
.counter-value {
font-size: 60px;
line-height:1.2em;
text-align:center;
padding:2px 0;
}
.counter-value:after {
content: attr(data-desc);
display:block;
text-transform:uppercase;
font-size: 14px;
line-height:1.5em;
}
</style>

最佳答案

必须更改窗口加载函数,因为控制台因此出现错误。

错误:

Uncaught TypeError: url.indexOf is not a function at jQuery.fn.init.jQuery.fn.load (VM811 jquery.js:9823) at VM326:60

JSFiddle:here

行改变了:

$(window).on('load', function() {

引用:

  1. URL.indexOf not found

关于jquery - 结合 2 个不同的计数代码来创建一个特定的结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45767282/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com