数字变化滚动到指定数字的文字特效

时间 2019-11-18

标签数字变化滚动指定文字特效繁體版

原文原文链接

<!DOCTYPE html>

<html>

<head>

<title>数字自动增长</title>

</head>

<body>

</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);