简介
jquery-countdown-timer是一个基于jQuery的倒计时插件，它可以用于一些需要定时处理的前端任务，如关闭一个提示框，跳转到下一步页面等等。
安装
使用npm安装jQuery-countdown-timer，只需要在终端输入以下命令：
npm install jquery-countdown-timer --save
使用介绍
要使用jquery-countdown-timer，首先需要将jquery引入到你的项目中：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
然后，在你的html文件中引入jquery-countdown-timer：
<script src="path/to/jquery-countdown-timer.js"></script>
引入文件后，开始使用jquery-countdown-timer：
$('[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'));
});
});以上代码将给指定的页面元素添加一个倒计时功能，当元素上具有“data-countdown”属性时，该属性的值将作为倒计时的目标时间。
在上面的例子中，所添加的元素将会显示距离目标时间还有多少个自然日，小时，分钟和秒。
参数说明
jquery-countdown-timer提供了一些参数来满足不同场景下的需求。
layout: 描述显示倒计时字符串的方式
date: 倒计时的目标时间戳
startTime: 倒计时的起始时间戳
leadingZero: 是否显示前导零
countdownByYear: 是否启用跨年倒计时
daysHoursOnly: 是否只显示天数和小时数
timeSeparator: 显示时间符号
详细用法
下面是一个更加详细的例子，它使用了以上提到的所有选项：
-- -------------------- ---- -------
------------------------------------- -
--- ----- - --------
------ - -------------------- -- --- ---- ----------
---- - ------------------------
--------- - -------------------------
----------- - ---------------------------
--------------- - --------------------------------
------------- - ------------------------------
------------- - -----------------------------
-----------------
------- -------
----- -----
---------- ----------
------------ ------------
---------------- ----------------
-------------- --------------
-------------- -------------
---
---这个例子使用了一系列data-*属性，它们能够覆盖大多数jquery-countdown-timer的选项。
示例代码
下面是一个简单的例子，演示了如何启动一个基础的倒计时功能：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------- ------------
------- ----------------------------------------------------------------------------
------- -------------------------------------------------
-------
------
---- ----------------------------------
------- -----------------------
---------------------------- -
- ------------------------------------- -
- --- ----- - -------- --------- - --------------------------
- -------------------------- --------------- -
- ----------------------------- ---- ------------
- ---
- ---
----
---------
-------
-------总结
jquery-countdown-timer提供了完善的API，可以满足不同场景下对倒计时功能的需求。使用它可以方便地实现各种倒计时场景，例如: 秒杀，抢购，节日倒计时等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c0381e8991b448d9a14