数字变化滚动到指定数字的文字特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数字自动增加</title>
</head>
<body>
<h1 id="time"></h1>
</body>
</html>
//引入jquery
//数字自增到某一值动画参数（目标元素,自定义配置）
function NumAutoPlusAnimation(targetEle, options) {
/*可以自己改造下传入的参数，按照自己的需求和喜好封装该函数*/
//不传配置就把它绑定在相应html元素的data-xxxx属性上吧
options = options || {};
var $this = document.getElementById(targetEle),
time = options.time || $this.data('time'), //总时间--毫秒为单位
finalNum = options.num || 0, //要显示的真实数值
regulator = options.regulator || 100, //调速器，改变regulator的数值可以调节数字改变的速度
frontBackDifference = Number(options.frontBackDifference), //数值变化前后的差值
step = frontBackDifference / (time / regulator),
/*每30ms增加的数值--*/
count = Number($("#time").html()), //计数器
initial = 0;
var timer = setInterval(function() {
count = count + step;
if (count >= finalNum) {
clearInterval(timer);
count = finalNum;
}
//t未发生改变的话就直接返回
//避免调用text函数，提高DOM性能
var t = Math.floor(count);
if (t == initial) return;
initial = t;
$this.innerHTML = initial;
}, 30);
}
//第一次初始化，相当于第一次请求的数据
var num = 200
NumAutoPlusAnimation("time", {
time: 4000,
num: num,
regulator: 50,
frontBackDifference: num,
});
//每个6秒向后台请求数据的变化
setInterval(function() {
var num1 = $("#time").html(); //请求数据的上一次的值
var num2 = Number($("#time").html()) + 40; //请求回来的数据
var num3 = num2 - num1; //两次数值差，也就是增加的数值
console.log(num3)
NumAutoPlusAnimation("time", {
time: 4000,
num: num2,
regulator: 50,
frontBackDifference: num3,
})
}, 6000);
