jQuery是一種快速，小巧并且功能強大的JavaScript庫，它簡化了HTML文檔遍歷和操作、事件處理、動畫效果和AJAX等常見的JavaScript操作。
在jQuery中有一個日期計數器插件，可以幫助我們在網頁中方便地顯示日期，并且可以添加一些自定義樣式。首先我們需要導入jQuery和日期計數器插件的JS文件。
<!doctype html>
<html lang="en">
<head>
<title>日期計數器插件</title>
<!-- 引入jQuery和日期計數器插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
</head>
<body>
<div id="countdown"></div>
</body>
</html>在HTML文件中我們創建了一個id為countdown的div元素，這個元素將用于顯示日期。下面我們在JS文件中添加代碼來調用日期計數器插件。
<script>
$(document).ready(function () {
// 設置時間
var date = new Date('2022/01/01');
// 調用日期計數器插件
$('#countdown').countdown(date, function (event) {
$(this).html(event.strftime('%D天 %H時 %M分 %S秒'));
});
});
</script>在JS代碼中，我們先設置了一個時間變量，這個變量表示2019年11月1日。然后我們調用了日期計數器插件，并設置了它的回調函數，回調函數會在每次倒計時更新時自動調用，我們在函數內部使用了event.strftime方法將剩余時間格式化為天時分秒的形式，再將格式化后的時間顯示在頁面上。
最后，我們打開HTML文件，就可以看到倒計時插件已經成功顯示在頁面上。
<!doctype html>
<html lang="en">
<head>
<title>日期計數器插件</title>
<!-- 引入jQuery和日期計數器插件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
</head>
<body>
<div id="countdown"></div>
<script>
$(document).ready(function () {
// 設置時間
var date = new Date('2022/01/01');
// 調用日期計數器插件
$('#countdown').countdown(date, function (event) {
$(this).html(event.strftime('%D天 %H時 %M分 %S秒'));
});
});
</script>
</body>
</html>