使用jQuery開發乙個超酷的倒計時效果

2021-06-29 05:41:23 字數 1584 閱讀 8613

**:

今天我們分享一篇來自tutorialzine的教程,本文將使用jquery開發乙個超酷的倒計時效果外掛程式,使用這個外掛程式你可以生成乙個非常炫的倒計時器,你可以方便的整合到你需要的web功能模組中,希望大家喜歡!

我們將使用如下**生成乙個倒計時器的介面:

在以上**中,你不需要設定任何東西,只需要指定你需要生成倒計時器的元素。

這裡我們開發了倆個外掛程式的輔助方法,如下:

init:用來生成你看到的標籤

switchdigit:將.position span中的數字動畫起來

**如下:

接下來我們開發外掛程式主體:

(function($),

timestamp : 0

},prop);

var left, d, h, m, s, positions;

// initialize the plugin

init(this, options);

positions = this.find('.position');

(function tick()

// number of days left

d = math.floor(left / days);

updateduo(0, 1, d);

left -= d*days;

// number of hours left

h = math.floor(left / hours);

updateduo(2, 3, h);

left -= h*hours;

// number of minutes left

m = math.floor(left / minutes);

updateduo(4, 5, m);

left -= m*minutes;

// number of seconds left

s = left;

updateduo(6, 7, s);

// calling an optional user supplied callback

options.callback(d, h, m, s);

// scheduling another call of this function in 1s

settimeout(tick, 1000);

})();

// this function updates two digit positions at once

function updateduo(minor,major,value)

return this;

};/* the two helper functions go here */

})(jquery);

以下**將演示如何呼叫上述外掛程式:

$(function()

$('#countdown').countdown(

else

note.html(message);

}});

});

**書寫完畢!

via tutorialzine

使用jQuery開發乙個超酷的倒計時效果

今天我們分享一篇來自tutorialzine的教程,本文將使用jquery開發乙個超酷的倒計時效果外掛程式,使用這個外掛程式你可以生成乙個非常炫的倒計時器,你可以方便的整合到你需要的web功能模組中,希望大家喜歡!div id countdown class countdownholder span...

如何開發乙個Jquery外掛程式?

最近有離職的想法,可這不是重點,重點是很多面試官都會問的乙個問題就是 怎麼開發乙個jquery外掛程式。其實,如果是在真實的工作中遇到這種情況,我會直接找乙個簡單的jquery外掛程式,例如jquery.cookie.js或者jquery.textchange.js外掛程式,jquery的外掛程式那...

40個超酷的jQuery動畫教程

由於它的到來,已經引起了jquery的網路風暴,現在是建立漂亮的網頁上的動畫的首選解決方案之一。jquery提供了很大的跨瀏覽器支援,它是輕量級且易於使用的。現在,你可以看到一些應用方式,有效地展示其定義和控制小規模的網頁動畫的jquery效果。直到css3的完全成熟,有足夠的支援主要的瀏覽器和所有...