JS中好用的计时器工具：clocker-js

2023年8月28日 221次阅读来源: 科研者

内容

一、简介

clocker-js 是计时器，有正计时和倒计时的功能，并且支持计时超时；

如果您在使用该库的过程中有遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：

邮箱：guobinyong@qq.com
QQ：guobinyong@qq.com
微信：keyanzhe

二、安装方式

目前，安装方式有以下几种：

方式1：通过 npm 安装

npm install --save clocker-js

方式2：直接下载原代码

您可直接从本项目的Git仓库下载，此仓库里包含了 clocker 和下文的示例代码；clocker 库是本项目的Git仓库项目中的 clocker/Clocker.js 文件，您可以直接把该文件拷贝到您的项目中去；然后使用如下代码在您的项目中引入 Clocker：

import { Clocker } from "path/to/package/Clocker.js";

或者

import Clocker from "path/to/package/Clocker.js";

三、正计时器的使用方式

创建目标时间对象:
```
let targetDate = new Date();
```

用目标时间对象初始化计时器实例：

let clocker = new Clocker(targetDate);  // 创建 计时器对象

也可以先创建定时器，再更改目标时间，如下：

let clocker = new Clocker();  // 创建 计时器对象
clocker.targetDate = targetDate;  // 更改 目标时间

在你需要的时候获取定时器实例的相关计时信息；

let year = clocker.year;
let month = clocker.month;
let date = clocker.date;
let hours = clocker.hours;
let minutes = clocker.minutes;
let seconds = clocker.seconds;

console.log(year,month,date,hours,minutes,seconds);

四、倒计时器的使用方式

创建目标时间对象:

let targetDate = new Date(2020,2,3,13,0,0);

用目标时间对象初始化计时器实例：

let clocker = new Clocker(targetDate,true);  // 创建 计时器对象

也可以先创建定时器，再更改目标时间，如下：

let clocker = new Clocker();  // 创建 计时器对象;
clocker.targetDate = targetDate;  // 更改 目标时间
clocker.countDown = true;  // 设置 计时器 为倒计时器；

在你需要的时候获取定时器实例的相关计时信息；

let year = clocker.year;
let month = clocker.month;
let date = clocker.date;
let hours = clocker.hours;
let minutes = clocker.minutes;
let seconds = clocker.seconds;

console.log(year,month,date,hours,minutes,seconds);

五、计时状态

计时器实例有个只读属性 isCounting ，表示计时器的状态；

当 isCounting 的值为 true 时，表示目前正在正常地计时；
当 isCounting 的值为 false 时，表示目处于非正在正常计时状态，具体的含义如下：

在正计时中表示：还未到达开始计时时间；
在倒计时中表示：已经到达结束时间；

并且，当 isCounting 的值为 false 时，实例的 year、month、date、hours、minutes、seconds、milliseconds 均是负值；

六、接口文档

constructor

constructor(targetDate, countDown)

@param targetDate : Date 目标时间，在正计时中，目标时间是计时的起始时间；在倒计时中，目标时间为结束时间；默认为当前时间
@param countDown : boolean 是否是倒计时，默认为 false

isCounting

@readonly : boolean

说明：
计时是否正在正常地进行中

注意：

在正计时中，返回 false 表示：还未到达开始计时时间；
在倒计时中，返回 false 表示：已经到达结束时间；

dateObj

@readonly : Date

说明：
获得计时的 Date 对象 (以世界标准时间(UTC)计时)

year

@readonly : number

说明：
获得计时的年数

month

@readonly : number

说明：
获得计时的月数

date

@readonly : number

说明：
获得计时的天数

hours

@readonly : number

说明：
获得计时的小时数

minutes

@readonly : number

说明：
获得计时的分钟数

seconds

@readonly : number

说明：
获得计时的秒钟数

milliseconds

@readonly : number

说明：
获得计时的毫秒数

    原文作者：科研者
    原文地址: https://www.jianshu.com/p/d617da22b0df
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

算法网