利用JS實(shí)現(xiàn)數(shù)字增長
上次在項(xiàng)目中碰到要實(shí)現(xiàn)數(shù)字增長的效果,實(shí)現(xiàn)數(shù)字從0到目標(biāo)數(shù)的增長,來看看效果圖
現(xiàn)在把它擴(kuò)展開來可以實(shí)現(xiàn)不同效果
主要思路就兩部分
1.每隔三個(gè)數(shù)字之間加上,
2.實(shí)現(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; } }
要實(shí)現(xiàn)加起來的效果可以使用requestAnimationFrame
方法,然后處理一下兼容就可以了。
var change = function() { var p = Math.min(1.0, (new Date().getTime() - that.startTime) / that.option.duration);//當(dāng)前時(shí)間減去開始時(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ū)再動起來的效果,可以自己監(jiān)聽dom是否在可視區(qū)然后調(diào)用。
以上就是本文的全部內(nèi)容,如果有疑問歡迎大家留言探討,也謝謝大家對腳本之家的支持。
相關(guān)文章
JavaScript遞歸操作樹形結(jié)構(gòu)代碼示例
前端樹形結(jié)構(gòu)一般用于網(wǎng)頁的地理位置輸入框,地理位置級聯(lián)選擇,人員的部門選擇等,這篇文章主要給大家介紹了關(guān)于JavaScript遞歸操作樹形結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2024-01-01JavaScript對JSON數(shù)據(jù)進(jìn)行排序和搜索
今天教給大家如何使用數(shù)組的方法來實(shí)現(xiàn)JSON數(shù)據(jù)進(jìn)行排序和搜索功能,具體實(shí)例代碼大家參考下本文吧2017-07-07javascript基本數(shù)據(jù)類型及類型檢測常用方法小結(jié)
這篇文章主要介紹了javascript基本數(shù)據(jù)類型及類型檢測常用方法,總結(jié)分析了javascript的基本數(shù)據(jù)類型與類型檢測的常用操作方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-12-12