[jQuery Plugin] 倒數計時- jQuery.countdown

網址：https://hilios.github.io/jQuery.countdown/

2021-07-17 09:37:20

要使用倒數計時功能找到一隻很方便的 plugin- jQuery.countdown，基本的使用方法是把 plugin 讀入後像這樣寫：

view plain copy to clipboard print

$("#getting-started")
.countdown("2017/01/01", function(event) {
$(this).text(
event.strftime('%D days %H:%M:%S')
);
});

可以依據自己的需求去顯示時分秒甚至是週、月、年都可以。

若是要在一個頁面裡面顯示很多個倒數計時，這個若是在做活動頁面應該會有機會用到，寫法如下：

view plain copy to clipboard print

<div data-countdown="2016/01/01">div>
<div data-countdown="2017/01/01">div>
<div data-countdown="2018/01/01">div>
<div data-countdown="2019/01/01">div>

view plain copy to clipboard print

$('[data-countdown]').each(function() {
var $this = $(this), finalDate = $(this).data('countdown');
$this.countdown(finalDate, function(event) {
$this.html(event.strftime('%D days %H:%M:%S'));
});
});

有需要的話再去調整每一個時間顯示的樣子，想看更多範例可以看官方文件。

我有把這個做在 Pokemon GO 活動列表上。

C3.js- 以 D3.js 為基礎的圖表函式庫使用 jQuery ajax 上傳 csv 後並透過 D3.js 畫出圖表

你可能也會喜歡的

[Vue.js] vue leaflet 基本設置與地圖樣式

javascript ++i 和 i++ 的差別

Jarallax- 背景視差滾動套件

[jQuery] 點選圖片後切換循環播放效果

[jQuery] 透過網址的 hash 滑到指定的頁面位置

連結上的 javascript:void(0); 是什麼

課程推薦

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。