数字变化滚动到指定数字的文字特效
生活随笔
收集整理的這篇文章主要介紹了
数字变化滚动到指定数字的文字特效
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html> <html>
/*可以自己改造下傳入的參數(shù)，按照自己的需求和喜好封裝該函數(shù)*/ //不傳配置就把它綁定在相應(yīng)html元素的data-xxxx屬性上吧 options = options || {};
var $this = document.getElementById(targetEle), time = options.time || $this.data('time'), //總時(shí)間--毫秒為單位 finalNum = options.num || 0, //要顯示的真實(shí)數(shù)值 regulator = options.regulator || 100, //調(diào)速器，改變r(jià)egulator的數(shù)值可以調(diào)節(jié)數(shù)字改變的速度 frontBackDifference = Number(options.frontBackDifference), //數(shù)值變化前后的差值 step = frontBackDifference / (time / regulator), /*每30ms增加的數(shù)值--*/ count = Number($("#time").html()), //計(jì)數(shù)器 initial = 0;
var timer = setInterval(function() {
count = count + step;
if (count >= finalNum) { clearInterval(timer); count = finalNum; } //t未發(fā)生改變的話就直接返回 //避免調(diào)用text函數(shù)，提高DOM性能 var t = Math.floor(count); if (t == initial) return;
initial = t;
$this.innerHTML = initial; }, 30); } //第一次初始化，相當(dāng)于第一次請(qǐng)求的數(shù)據(jù) var num = 200 NumAutoPlusAnimation("time", { time: 4000, num: num, regulator: 50, frontBackDifference: num, }); //每個(gè)6秒向后臺(tái)請(qǐng)求數(shù)據(jù)的變化 setInterval(function() { var num1 = $("#time").html(); //請(qǐng)求數(shù)據(jù)的上一次的值 var num2 = Number($("#time").html()) + 40; //請(qǐng)求回來(lái)的數(shù)據(jù) var num3 = num2 - num1; //兩次數(shù)值差，也就是增加的數(shù)值 console.log(num3) NumAutoPlusAnimation("time", { time: 4000, num: num2, regulator: 50, frontBackDifference: num3, }) }, 6000);
?
<head> <meta charset="UTF-8"> <title>數(shù)字自動(dòng)增加</title> </head>?
<body> <h1 id="time"></h1> </body>?
</html> //引入jquery //數(shù)字自增到某一值動(dòng)畫(huà)參數(shù)（目標(biāo)元素,自定義配置） function NumAutoPlusAnimation(targetEle, options) {/*可以自己改造下傳入的參數(shù)，按照自己的需求和喜好封裝該函數(shù)*/ //不傳配置就把它綁定在相應(yīng)html元素的data-xxxx屬性上吧 options = options || {};
var $this = document.getElementById(targetEle), time = options.time || $this.data('time'), //總時(shí)間--毫秒為單位 finalNum = options.num || 0, //要顯示的真實(shí)數(shù)值 regulator = options.regulator || 100, //調(diào)速器，改變r(jià)egulator的數(shù)值可以調(diào)節(jié)數(shù)字改變的速度 frontBackDifference = Number(options.frontBackDifference), //數(shù)值變化前后的差值 step = frontBackDifference / (time / regulator), /*每30ms增加的數(shù)值--*/ count = Number($("#time").html()), //計(jì)數(shù)器 initial = 0;
var timer = setInterval(function() {
count = count + step;
if (count >= finalNum) { clearInterval(timer); count = finalNum; } //t未發(fā)生改變的話就直接返回 //避免調(diào)用text函數(shù)，提高DOM性能 var t = Math.floor(count); if (t == initial) return;
initial = t;
$this.innerHTML = initial; }, 30); } //第一次初始化，相當(dāng)于第一次請(qǐng)求的數(shù)據(jù) var num = 200 NumAutoPlusAnimation("time", { time: 4000, num: num, regulator: 50, frontBackDifference: num, }); //每個(gè)6秒向后臺(tái)請(qǐng)求數(shù)據(jù)的變化 setInterval(function() { var num1 = $("#time").html(); //請(qǐng)求數(shù)據(jù)的上一次的值 var num2 = Number($("#time").html()) + 40; //請(qǐng)求回來(lái)的數(shù)據(jù) var num3 = num2 - num1; //兩次數(shù)值差，也就是增加的數(shù)值 console.log(num3) NumAutoPlusAnimation("time", { time: 4000, num: num2, regulator: 50, frontBackDifference: num3, }) }, 6000);
轉(zhuǎn)載于:https://www.cnblogs.com/l-y-z/p/9604314.html
總結(jié)
以上是生活随笔為你收集整理的数字变化滚动到指定数字的文字特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 死锁处理【转】
- 下一篇： 数据方面高可用方案简单总结