使用 jquery.counterup.min 在 HTML span 标签元素上进行 JavaScript 计数器.js不起作用

Question

我目前正在开发一个 Django 应用程序，我正在尝试设置一个计数器以在主页上显示给定的整数。

这是我在HTML模板上加载的JavaScript内容(不是整个文件(：

<script type="text/javascript" src="{% static 'EpiDB/jquery-3.2.0.min.js' %}">
</script>
<script type="text/javascript" src="{% static 'EpiDB/jquery.tablesorter.min.js' %}">
</script>
<script type="text/javascript">
$(document).ready(function() 
{ 
$("#annotable").tablesorter(); 
} 
);
</script>
<script type="text/javascript" src="{% static 'EpiDB/jquery.searchable-1.0.0.min.js' %}">
</script>
<script type="text/javascript">
$(function () {
$( '#annotable' ).searchable({
searchField: '#annotsearch',
striped: true,
oddRow: { 'background-color': '#e2e9f3' },
evenRow: { 'background-color': '#ffffff' },
searchType: 'fuzzy'
})
});
</script>
<!-- popper js -->
<script src="{% static 'EpiDB/popper.min.js' %}"></script>
<!-- bootstrap js -->
<script src="{% static 'EpiDB/bootstrap.min.js' %}"></script>
<!-- easing js -->
<script src="{% static 'EpiDB/jquery.magnific-popup.js' %}"></script>
<!-- swiper js -->
<script src="{% static 'EpiDB/swiper.min.js' %}"></script>
<!-- swiper js -->
<script src="{% static 'EpiDB/masonry.pkgd.js' %}"></script>
<!-- particles js -->
<script src="{% static 'EpiDB/owl.carousel.min.js' %}"></script>
<script src="{% static 'EpiDB/jquery.nice-select.min.js' %}"></script>
<!-- swiper js -->
<script src="{% static 'EpiDB/slick.min.js' %}"></script>
<script src="{% static 'EpiDB/waypoints.min.js' %}"></script>
<script src="{% static 'EpiDB/jquery.counterup.min.js' %}"></script>

使用其他JavaScript文件的页面的所有内容都工作正常，除了计数器。所以我读了一些关于jquery.counterup.min.js应该工作的方式，我得出的结论是，要么我对waypoints.min.js(jQuery Waypoints - v2.0.3(文件做错了什么，要么是jquery-3.2.0.min.js。

我发现GitHub问题仍然悬而未决，提到了可能与jQuery 3.1(我想与jQuery 3.2不兼容(。

顺便说一下，这是我尝试工作的 HTML 片段，到目前为止还没有成功：

<span class="counter">1200</span>

所以我的问题是为什么计数器不起作用，问题的根源是什么(知道其他一切都完美(，如果问题来自我的jquery-3.2.0.min的版本.js是否有任何修复或任何选项来避免使用旧版本的jQuery？ 但是，如果您有使用较新版本的jQuery的解决方案， 我很感兴趣。

它在Firefox(V 70.0.1(和Chromium(V 78.0.3904.108(中都不起作用。

Answer 1

基本上解决方案是使用此Github问题中提到的"jquery.waypoints.js"文件。

然后将 CounterUp 的激活添加到 html 模板中。

这是重要的部分：

<script type="text/javascript" src="{% static 'EpiDB/jquery-3.2.0.min.js' %}">
</script>
<script src="{% static 'EpiDB/jquery.waypoints.js' %}"></script>
<script src="{% static 'EpiDB/jquery.counterup.min.js' %}"></script>
<script type="text/javascript">
$(document).ready(function() { $('.counter').counterUp();} );
</script>

Answer 2

也许，不需要库。 它能够使用一些功能。

var counter =  function (index, max ,result) {
index++;
result(index);
if (index < max)
setTimeout(this.counter, 70, index, max ,result);
}
counter(0 ,10 , (value)=>{document.getElementById("txt").innerHTML = value;});