數字變化滾動到指定數字的文字特效

時間 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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。