看到了官方炫酷的效果http://inorganik.github.io/countUp.js/ 结果下载后半天不得要领。
最后总结使用方法如下:
1.页面中调用js代码:
这里必须要时countUp.umd.js文件 ,其他文件试过不行。
<script src="countUp.umd.js"></script>
2.html代码:
<div class="count">当前报价:<span id="number1">1</span></div>
3.js代码:这里可以使用官方的实列代码。
注意:1.myTargetElement为实列对象中的id
2.*countUp.*CountUp()这里的countUp必须要写,具体原因请大神指点。
const options = {
startVal: 100,
};
let demo = new countUp.CountUp('number1', 6668, options);
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
};
我这里需要用的定时请求后台数据,不断更新到页面上,所以优化了代码如下:
//开始时从0开始动画
var startnum=10;//第一次请求到的数据
scrollNum(0,startnum);
var newnum=0;
setInterval(function() {
// $.getJSON("number.php?jsonp=?", function (data) {
// newnum=data; //这里只是数字
// });
newnum += 80;
scrollNum($('#number1').text(),newnum)
},10000);
//定义函数携带初始数字,最新数字
//以下是count.js的固定用法,num1为前期值,num2为最新值
function scrollNum(num1,num2){
console.log(num2);
const options = {
startVal: num1,
duration: 2,
};
let demo = new countUp.CountUp('number1', num2, options);
if (!demo.error) {
demo.start();
} else {
console.error(demo.error);
};
$('#number1').html(num2);
}