前言
倒计时组件在前端开发中是非常常见的一个需求，它可以用于各种场景，例如秒杀倒计时，活动倒计时等等。今天，我将介绍如何使用npm包ng2-date-countdown-abadid来实现倒计时。
npm包 ng2-date-countdown-abadid
ng2-date-countdown-abadid是一个Angular2的倒计时组件库，可以快速方便地创建倒计时。
安装
npm install ng2-date-countdown-abadid
使用
首先，需要在你的 app.modules.ts 中导入 DateCountdownModule 模块:
import { DateCountdownModule } from 'ng2-date-countdown-abadid';
@NgModule({
imports: [ DateCountdownModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})接着，在模板中添加以下代码，可以在模板中使用组件：
<ng2-date-countdown
units="seconds" startOn="2018-01-01 00:00:00"
[interval]="1000" [leadingZero]="true"
(complete)="countDownCompleted()">
</ng2-date-countdown>参数说明
- units(string)：倒计时倒数的单位（'years', 'months', 'days', 'hours', 'minutes', 'seconds'），默认为'seconds'
- startOn(string)：倒计时开始时间，默认为当前时间
- interval(number)：倒计时更新间隔时间（毫秒），默认为1000
- leadingZero(boolean)：是否显示倒计时中的零（0），默认为true
- complete(EventEmitter)：倒计时结束触发的事件
示例
接下来，我们将利用该组件实现一个秒杀活动倒计时的示例，实现效果如下：
代码实现
首先，创建一个秒杀活动组件，在组件中定义倒计时的相关参数：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------------
--------- --------------
--------- -
---- ----------------
---- -----------------
---- ------------------
---- ------------------------------
---- -------------------------
------
---- ------------------
---- -------------------------------
---- --------------------------
------
---- ------------------
---- ---------------------------------
---- -------------------------
------
---- ------------------
---- ---------------------------------
---- -------------------------
------
------
---- ------------------------------
------
--
---------- ----------------------------
--
------ ----- ---------------- ---------- ------ -
--------- - ----------- ----------
------- - ----------- ----------
------- - --- -------
--------- ----
---- -------
----- -------
------- -------
------- -------
------------- - -
---------- -
----------------------
-
---------------- -
--- --- - --- -----------------------------
--- --- - -----------------------
--- ---- - --- - ----
-------- - --------------- - ----- - -- - -- - -----
--------- - ---------------- - ----- - -- - -- - ---- - ----- - -- - -----
----------- - ---------------- - ----- - -- - ---- - ----- - -----
----------- - ---------------- - ----- - ---- - ------
-------------- -- -
---- -- -----
-------- - --------------- - ----- - -- - -- - -----
--------- - ---------------- - ----- - -- - -- - ---- - ----- - -- - -----
----------- - ---------------- - ----- - -- - ---- - ----- - -----
----------- - ---------------- - ----- - ---- - ------
-- -----
-
-其中，我们定义了开始时间、结束时间、当前时间和倒计时剩余时间。
在 startCountdown 方法中，我们计算出剩余的时间，并通过 ng2-date-countdown 组件来实现倒计时的效果。
最后，在模板中使用该组件：
<ng2-date-countdown [startOn]="startTime" [endOn]="endTime" units="days, hours, minutes, seconds" [interval]="1000" (complete)="countDownCompleted()"> <app-seckill></app-seckill> </ng2-date-countdown>
样式实现
最后，在组件中加入样式：
-- -------------------- ---- -------
-------- -
-------- -----
---------------- -------
----------- -----
----------- - --- --- - ----------------- - --- ---- - -----------------
-------- -----
----------- -----------
--------- -
-------- -----
------------ -------
---------------- -------
------------- -----
---------- -
---------- -----
------ -----
------------- -----
-------- - -----
------- --- ----- -----
--------- -
------------ -----
------------ -----
-
---------- -
------------ -----
-
------------ -
------------- --
-
-
-
------------ -
----------------- -----
------ -----
-------------- ----
-------- ---- -----
------- --------
------- -
----------------- -----
-
-
-总结
通过使用 npm 包 ng2-date-countdown-abadid ，我们可以快速地实现倒计时的功能，从而具有很高的实用价值。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5451ab1864dac66978