在前端开发中，倒计时器是一个常见的组件，用于倒计时某个事件的到来，如秒杀活动、抢购活动等。本文将介绍如何使用 ES6/ES7 实现一个简单的倒计时器组件，并提供示例代码。
组件功能
倒计时器组件需要实现以下功能：
- 接受一个目标时间作为参数，如
2022-01-01 00:00:00 - 实时计算距离目标时间的倒计时，并将其展示在页面上，如
距离2022年1月1日还有：2天3小时20分钟30秒 - 倒计时结束时，触发回调函数
实现思路
倒计时器组件的实现思路如下：
- 获取目标时间和当前时间的时间差
- 将时间差转换为天、小时、分钟、秒等单位
- 将时间差展示在页面上
- 实时更新展示的时间差
- 倒计时结束时触发回调函数
实现步骤
1. 安装 Moment.js
Moment.js 是一个流行的 JavaScript 日期处理库，它可以方便地处理日期和时间。我们可以使用 Moment.js 来计算时间差。
使用 npm 安装 Moment.js：
npm install moment --save
2. 创建 CountdownTimer 类
我们可以使用 ES6 中的类来创建 CountdownTimer 类，该类将包含倒计时器组件的所有功能。以下是 CountdownTimer 类的代码：
-- -------------------- ---- -------
------ ------ ---- ---------
----- -------------- -
----------------------- --------- -
--------------- - -------------------
------------- - ---------
------------ - -----
--------------
-
-------- -
----- --------- - --------------------
-- ----------
-
-------------- -
----- --- - ---------
----- ---- - --------------------------
----- -------- - ----------------------
----- ---- - ----------------
----- ----- - -----------------
----- ------- - -------------------
----- ------- - -------------------
------ - ----- ------ -------- ------- --
-
------- -
------------ - -------------- -- -
----- --------- - --------------------
-- --------------- --- - -- --------------- --- - -- ----------------- --- - -- ----------------- --- -- -
----------------------------
----------------
- ---- -
--------------
-
-- ------
-
------ -
----------------------------
-
-CountdownTimer 类接受两个参数：目标时间和回调函数。目标时间应该是一个字符串，如 2022-01-01 00:00:00，回调函数将在倒计时结束时触发。
CountdownTimer 类包含四个方法：
render()：将倒计时展示在页面上getCountdown()：获取倒计时时间差start()：开始倒计时stop()：停止倒计时
3. 实现 render() 方法
render() 方法将倒计时展示在页面上。我们可以使用 DOM 操作来实现该方法。
以下是 render() 方法的代码：
-- -------------------- ---- ------- -------- - ----- --------- - -------------------- ----- ----------- - -------------------------------- ----- ------------ - --------------------------------- ----- -------------- - ----------------------------------- ----- -------------- - ----------------------------------- --------------------- - --------------- ---------------------- - ---------------- ------------------------ - ------------------ ------------------------ - ------------------ -
我们首先使用 getCountdown() 方法获取倒计时时间差，然后使用 DOM 操作将倒计时展示在页面上。
4. 实现 getCountdown() 方法
getCountdown() 方法将获取目标时间和当前时间的时间差，并将其转换为天、小时、分钟、秒等单位。
以下是 getCountdown() 方法的代码：
-- -------------------- ---- ------- -------------- - ----- --- - --------- ----- ---- - -------------------------- ----- -------- - ---------------------- ----- ---- - ---------------- ----- ----- - ----------------- ----- ------- - ------------------- ----- ------- - ------------------- ------ - ----- ------ -------- ------- -- -
我们首先使用 Moment.js 获取当前时间和目标时间的时间差，然后使用 Moment.js 将时间差转换为天、小时、分钟、秒等单位，并将其返回。
5. 实现 start() 方法
start() 方法将开始倒计时，并实时更新倒计时展示。
以下是 start() 方法的代码：
-- -------------------- ---- -------
------- -
------------ - -------------- -- -
----- --------- - --------------------
-- --------------- --- - -- --------------- --- - -- ----------------- --- - -- ----------------- --- -- -
----------------------------
----------------
- ---- -
--------------
-
-- ------
-我们使用 setInterval() 方法每隔一秒钟更新一次倒计时展示。如果倒计时结束，我们将停止计时器并触发回调函数。
6. 实现 stop() 方法
stop() 方法将停止倒计时。
以下是 stop() 方法的代码：
stop() {
clearInterval(this.timerId);
}我们使用 clearInterval() 方法停止计时器。
使用示例
以下是使用 CountdownTimer 类的示例代码：
const targetDate = '2022-01-01 00:00:00';
const callback = () => {
console.log('倒计时结束');
};
const countdownTimer = new CountdownTimer(targetDate, callback);
countdownTimer.start();我们首先创建一个 CountdownTimer 实例，然后调用 start() 方法开始倒计时。
总结
本文介绍了如何使用 ES6/ES7 实现一个简单的倒计时器组件。我们使用 Moment.js 来计算时间差，并使用类来组织代码。该组件具有实时更新倒计时展示、倒计时结束时触发回调函数等功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6562de6dd2f5e1655dca185a