因此,我想反驳我正在开发的主题。我决定使用Countup.js。我正确地加载了Index.html和everthyinh,并尝试执行基本功能,但它表明CountUp没有在chrome的开发人员控制台中定义。这是错误。
未捕获的ReferenceError:未定义countUp
在custom.js:9
(匿名)@ custom.js:9
我的js代码-
var numAmin = new CountUp("counter1", 0, 500);
numAmin.start();
我的HTML代码-
<i class="fa fa-desktop fa-5x fa-inverse targetone" id="counter1"></i>
最佳答案
确保将jquery放在countup.js之前,并在文档加载后运行脚本。
并将class =“ countupthis”和属性numx =“”添加到要计数的所有元素。
将numx属性设置为要计数的数字。
.facthold {text-align:center; display:inline-block; border:1px solid black; padding:10px;}
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div class="facthold"><i class="fa fa-desktop fa-3" aria-hidden="true"></i><br>
<span class="countupthis" numx="28">2</span><div>Desktop users</div>
</div>
<div class="facthold"><i class="fa fa-mobile fa-2" aria-hidden="true"></i><br>
<span class="countupthis" numx="70">23</span><div>Mobile users</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/countup.js/1.8.2/countUp.min.js'></script>
<script>
$(document).ready(function() {
var options = {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: ''
};
$('.countupthis').each(function() {
var num = $(this).attr('numx'); //end count
var nuen = $(this).text();
if (nuen === "") {
nuen = 0;
}
var counts = new CountUp(this, nuen, num, 0, 1.5, options);
counts.start();
});
});
</script>
</body>