利用JS實現(xiàn)數(shù)字增長
上次在項目中碰到要實現(xiàn)數(shù)字增長的效果,實現(xiàn)數(shù)字從0到目標(biāo)數(shù)的增長,來看看效果圖

現(xiàn)在把它擴展開來可以實現(xiàn)不同效果

主要思路就兩部分
1.每隔三個數(shù)字之間加上,
2.實現(xiàn)動起來
對于1使用正則來完成十分的方便
this.fomatNum = function(num) {
var str = num.toFixed(this.option.decimal);//精確到小數(shù)位數(shù)多少位
var num1, x1, x2, reg;
arr = str.split(".");
x1 = arr[0];
x2 = arr.length > 1 ? '.' + arr[1] : "";
reg = /(\d+)(\d{3})/;
if (this.option.isfomat) {
while (reg.test(x1)) {
x1 = x1.replace(reg, '$1' + "," + "$2");
}
}
if (this.option.isfomat) {
return this.option.prefix + x1 + x2;
} else {
return this.option.prefix + str;
}
}
要實現(xiàn)加起來的效果可以使用requestAnimationFrame方法,然后處理一下兼容就可以了。
var change = function() {
var p = Math.min(1.0, (new Date().getTime() - that.startTime) / that.option.duration);//當(dāng)前時間減去開始時間,然后除以總時間,Math.min,兩個數(shù)取最小值。
var nums = that.num * p;
that.elm.innerHTML = that.fomatNum(that.num * p);
if (p < 1.0) {//
requestAnimationFrame(function() {
change();
});
} else {
cancelAnimationFrame(change);
}
}
requestAnimationFrame(function() {
change();
});
如果要實現(xiàn)數(shù)字在可視區(qū)再動起來的效果,可以自己監(jiān)聽dom是否在可視區(qū)然后調(diào)用。
以上就是本文的全部內(nèi)容,如果有疑問歡迎大家留言探討,也謝謝大家對腳本之家的支持。
相關(guān)文章
使用JS中的exec()方法構(gòu)造正則表達(dá)式驗證
這篇文章主要介紹了使用JS中的exec()方法構(gòu)造正則表達(dá)式驗證的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08
js數(shù)組方法reduce經(jīng)典用法代碼分享
本文給大家整理了很多關(guān)于js數(shù)組方法reduce的經(jīng)典代碼片段,能夠讓大家更好的理解reduce的實例用法,一起學(xué)習(xí)下吧。2018-01-01
JavaScript canvas實現(xiàn)雪花隨機動態(tài)飄落
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實現(xiàn)雪花隨機動態(tài)飄落,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-02-02

