利用JS實(shí)現(xiàn)數(shù)字增長(zhǎng)
更新時(shí)間：2016年07月28日 17:26:26 投稿：daisy
做項(xiàng)目時(shí)候常常遇到，要做一個(gè)數(shù)字滾動(dòng)增加的效果。如何利用JavaScript實(shí)現(xiàn)數(shù)字增長(zhǎng)效果，一起來(lái)跟本文學(xué)習(xí)學(xué)習(xí)。
上次在項(xiàng)目中碰到要實(shí)現(xiàn)數(shù)字增長(zhǎng)的效果，實(shí)現(xiàn)數(shù)字從0到目標(biāo)數(shù)的增長(zhǎng)，來(lái)看看效果圖
現(xiàn)在把它擴(kuò)展開(kāi)來(lái)可以實(shí)現(xiàn)不同效果
主要思路就兩部分
1.每隔三個(gè)數(shù)字之間加上,
2.實(shí)現(xiàn)動(dòng)起來(lái)
對(duì)于1使用正則來(lái)完成十分的方便
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;
}
}
要實(shí)現(xiàn)加起來(lái)的效果可以使用requestAnimationFrame方法，然后處理一下兼容就可以了。
var change = function() {
var p = Math.min(1.0, (new Date().getTime() - that.startTime) / that.option.duration);//當(dāng)前時(shí)間減去開(kāi)始時(shí)間，然后除以總時(shí)間，Math.min,兩個(gè)數(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();
});
如果要實(shí)現(xiàn)數(shù)字在可視區(qū)再動(dòng)起來(lái)的效果，可以自己監(jiān)聽(tīng)dom是否在可視區(qū)然后調(diào)用。
以上就是本文的全部?jī)?nèi)容，如果有疑問(wèn)歡迎大家留言探討，也謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
使用JS中的exec()方法構(gòu)造正則表達(dá)式驗(yàn)證
這篇文章主要介紹了使用JS中的exec()方法構(gòu)造正則表達(dá)式驗(yàn)證的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
JavaScript仿網(wǎng)易選項(xiàng)卡制作代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript仿網(wǎng)易選項(xiàng)卡制作代碼，具有一定的參考價(jià)值，感興趣的朋友可以參考一下2016-10-10
IE與現(xiàn)代瀏覽器在DOM中最大的差異是什么無(wú)疑就是event了。各個(gè)瀏覽器接口的差異以及夠頭疼了，而IE甚至Firefox早期版本由于內(nèi)存管理機(jī)制不完善，很容易在事件處理中導(dǎo)致內(nèi)存泄漏2011-10-10
本篇文章主要介紹了原生js實(shí)現(xiàn)offset方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
數(shù)據(jù)庫(kù)管理工具PHPMyAdmin
這篇文章主要為大家介紹了數(shù)據(jù)庫(kù)管理工具PHPMyAdmin使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
在移動(dòng)端，側(cè)滑菜單是一個(gè)很常用的組件，本文就詳細(xì)的介紹小程序原生實(shí)現(xiàn)左滑抽屜菜單，具有一定的參考價(jià)值，感興趣的可以了解一下2021-07-07
js數(shù)組方法reduce經(jīng)典用法代碼分享
本文給大家整理了很多關(guān)于js數(shù)組方法reduce的經(jīng)典代碼片段，能夠讓大家更好的理解reduce的實(shí)例用法，一起學(xué)習(xí)下吧。2018-01-01
JavaScript canvas實(shí)現(xiàn)雪花隨機(jī)動(dòng)態(tài)飄落
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)雪花隨機(jī)動(dòng)態(tài)飄落，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片
用js實(shí)現(xiàn)預(yù)覽待上傳的本地圖片...2007-03-03
JS 各種網(wǎng)頁(yè)尺寸判斷實(shí)例方法
JS 各種網(wǎng)頁(yè)尺寸判斷實(shí)例方法，需要的朋友可以參考一下2013-04-04