js實(shí)現(xiàn)數(shù)字遞增特效【仿支付寶我的財(cái)富】
上周五應(yīng)著公司臨時(shí)需求,一天的時(shí)間解決掉官網(wǎng)(ps:比較簡(jiǎn)單哈哈),需求里面有一個(gè)特效就是數(shù)字遞增到指定的數(shù)值,其實(shí)JS寫也不復(fù)雜的,但是我發(fā)現(xiàn)一個(gè)js小插件,這個(gè)插件輕巧簡(jiǎn)單,用起來(lái)也非常簡(jiǎn)單實(shí)用。在這里分享給小盆友們吧,喜歡的直接拿走。

上面就是這個(gè)插件的效果,我們來(lái)看一下怎么使用的吧
第一: HTML部分這里簡(jiǎn)單列舉一個(gè)
<div class="counter col_fourth"> <h2 class="timer count-title" id="count-number" data-to="300" data-speed="1500"></h2> <p class="count-text ">小月博客</p> </div>
上面我們來(lái)了解兩個(gè)關(guān)鍵的東西:
- data-to 這個(gè)屬性控制你最終要遞增的數(shù)值是多少
- data-speed 這個(gè)看英文的意思就很清楚了就是表示數(shù)據(jù)遞增的速度了
ps: 這里的class和id 根據(jù)大家各自的修改去調(diào)整就好了,
第二:JS部分也是插件的核心代碼
$.fn.countTo = function(a) {
a = a || {};
return $(this).each(function() {
var c = $.extend({},
$.fn.countTo.defaults, {
from: $(this).data("from"),
to: $(this).data("to"),
speed: $(this).data("speed"),
refreshInterval: $(this).data("refresh-interval"),
decimals: $(this).data("decimals")
}, a);
var h = Math.ceil(c.speed / c.refreshInterval),
i = (c.to - c.from) / h;
var j = this,
f = $(this),
e = 0,
g = c.from,
d = f.data("countTo") || {};
f.data("countTo", d);
if (d.interval) {
clearInterval(d.interval)
}
d.interval = setInterval(k, c.refreshInterval);
b(g);
function k() {
g += i;
e++;
b(g);
if (typeof(c.onUpdate) == "function") {
c.onUpdate.call(j, g)
}
if (e >= h) {
f.removeData("countTo");
clearInterval(d.interval);
g = c.to;
if (typeof(c.onComplete) == "function") {
c.onComplete.call(j, g)
}
}
}
function b(m) {
var l = c.formatter.call(j, m, c);
f.html(l)
}
})
};
$.fn.countTo.defaults = {
from: 0,
to: 0,
speed: 1000,
refreshInterval: 100,
decimals: 0,
formatter: formatter,
onUpdate: null,
onComplete: null
};
function formatter(b, a) {
return b.toFixed(2)
}
$("#count-number").data("countToOptions", {
formatter: function(b, a) {
return b.toFixed(2).replace(/\B(?=(?:\d{3})+(?!\d))/g, ",")
}
});
$(".timer").each(count);
function count(a) {
var b = $(this);
a = $.extend({},
a || {},
b.data("countToOptions") || {});
b.countTo(a)
};
以上就是代碼的全部了,css部分就不在這里顯示了,demo下載的小伙伴在下面點(diǎn)擊下載吧!
其實(shí)這個(gè)插件可擴(kuò)展性很大的,至于小伙伴喜歡什么樣子的顯示自己動(dòng)手改造吧!
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
JavaScript本地?cái)?shù)據(jù)存儲(chǔ)sessionStorage與localStorage使用詳解
這篇文章主要介紹了JavaScript本地?cái)?shù)據(jù)存儲(chǔ)sessionStorage與localStorage使用,localStorage:永久存儲(chǔ)在本地,適合保存在本地的數(shù)據(jù)。sessionStorage:會(huì)話級(jí)的存儲(chǔ),敏感帳號(hào)一次登陸2022-10-10
HTML5游戲引擎LTweenLite實(shí)現(xiàn)的超帥動(dòng)畫效果(附demo源碼下載)
這篇文章主要介紹了HTML5游戲引擎LTweenLite實(shí)現(xiàn)的超帥動(dòng)畫效果,詳細(xì)分析了LTweenLite的下載,動(dòng)畫效果的實(shí)現(xiàn)步驟,并附帶完整的demo實(shí)例源碼供讀者下載,需要的朋友可以參考下2016-01-01
詳解微信小程序框架wepy踩坑記錄(與vue對(duì)比)
這篇文章主要介紹了詳解微信小程序框架wepy踩坑記錄(與vue對(duì)比),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
JavaScript導(dǎo)出CSV文件不完整的問(wèn)題解決方法
在JavaScript中處理CSV文件時(shí),需要特別注意一些特殊字符,例如逗號(hào)、雙引號(hào)、換行符等,這些字符可能會(huì)影響CSV文件的解析,導(dǎo)致數(shù)據(jù)錯(cuò)亂,所以本文給大家介紹了如何解決JavaScript導(dǎo)出CSV文件不完整的問(wèn)題,需要的朋友可以參考下2024-06-06
淺析JavaScript Array和string的轉(zhuǎn)換(推薦)
下面小編就為大家?guī)?lái)一篇淺析JavaScript Array和string的轉(zhuǎn)換(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
javascript canvas封裝動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了javascript canvas封裝動(dòng)態(tài)時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09

