UNPKG

3.19 kBMarkdownView Raw
1# CountDown
2
3[![npm][npm]][npm-url] ![npm](https://img.shields.io/npm/dt/countdown-pro) ![GitHub](https://img.shields.io/github/license/caijf/countdown.svg)
4
5一个简单的倒计时。
6
7[查看示例][site]
8
9## 使用
10
11**`npm` 或 `yarn` 安装**
12
13```shell
14npm install countdown-pro
15```
16
17```shell
18yarn add countdown-pro
19```
20
21**浏览器引入**
22
23在浏览器中使用 `script` 标签直接引入文件,并使用全局变量 `CountDown`
24
25- 该仓库的 [dist](https://github.com/caijf/countdown/tree/master/dist) 目录下提供了 `countdown.umd.js` 以及 `countdown.umd.min.js`
26- `npm` 包的 `countdown-pro/dist` 目录下也提供了 `countdown.umd.js` 以及 `countdown.umd.min.js`
27- 你也可以通过 [UNPKG](https://unpkg.com/countdown-pro@latest/dist/) 进行下载。
28
29## 示例
30
31```typescript
32import CountDown from 'countdown-pro';
33
34const countdown = new CountDown({
35 time: 60 * 1000,
36 interval: 1000,
37 onChange: (time) => {
38 console.log(time);
39 },
40 onEnd: () => {
41 console.log('结束');
42 }
43});
44
45countdown.start();
46```
47
48## 配置项
49
50| 参数 | 说明 | 类型 | 必填 | 默认值 |
51| -------- | ------------------ | ----------------------- | ---- | ------ |
52| time | 倒计时,单位毫秒 | `number` | `Y` | `0` |
53| interval | 时间间隔,单位毫秒 | `number` | - | `1000` |
54| onChange | 每次时间间隔时触发 | `(currentTime) => void` | - | - |
55| onEnd | 倒计时结束时触发 | `() => void` | - | - |
56
57## 实例方法
58
59| 方法名 | 说明 |
60| ------ | ---------- |
61| start | 开始倒计时 |
62| pause | 暂停倒计时 |
63| reset | 重置倒计时 |
64
65## 静态方法
66
67内置一些简单日期格式方法,通过 `CountDown.方法名` 直接调用。
68
69### CountDown.format(timestamp, pattern='HH:mm:ss')
70
71> 格式化时间,返回格式化后的时间字符串
72
73```javascript
74CountDown.format(2 * 60 * 60 * 1000); // "02:00:00"
75CountDown.format(2 * 60 * 60 * 1000, 'mm:ss'); // "120:00"
76```
77
78| 参数 | 说明 | 类型 | 必填 | 默认值 |
79| --------- | ---------------------------------------------- | -------- | ---- | ---------- |
80| timestamp | 时间戳,单位毫秒 | `number` | `Y` | - |
81| pattern | 时间格式,DD-日,HH-时,mm-分,ss-秒,SSS-毫秒 | `string` | - | `HH:mm:ss` |
82
83### CountDown.padZero(num, targetLength=2)
84
85> 前置补零,返回补零后的值
86
87```javascript
88CountDown.padZero(2); // "02"
89```
90
91### CountDown.parseTimeData(timestamp)
92
93> 解析时间戳,返回的时间对象格式 `timeData`
94
95```typescript
96interface TimeData {
97 days: number; // 天数
98 hours: number; // 小时
99 minutes: number; // 分钟
100 seconds: number; // 秒数
101 milliseconds: number; // 毫秒
102}
103```
104
105```javascript
106CountDown.parseTimeData(2 * 60 * 60 * 1000); // {days: 0, hours: 2, minutes: 0, seconds: 0, milliseconds: 0}
107```
108
109[site]: https://caijf.github.io/countdown/examples/
110[npm]: https://img.shields.io/npm/v/countdown-pro.svg
111[npm-url]: https://npmjs.com/package/countdown-pro