数字变化滚动到指定数字的文字特效
生活随笔
收集整理的這篇文章主要介紹了
数字变化滚动到指定数字的文字特效
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html> <html>
/*可以自己改造下傳入的參數，按照自己的需求和喜好封裝該函數*/ //不傳配置就把它綁定在相應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);
?
<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);
轉載于:https://www.cnblogs.com/l-y-z/p/9604314.html
總結
以上是生活随笔為你收集整理的数字变化滚动到指定数字的文字特效的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 死锁处理【转】
- 下一篇： 在QT中结构体快速从二进制文件中读取数据