{"id":22305607,"url":"https://github.com/keenwon/tictac","last_synced_at":"2025-07-29T04:32:20.297Z","repository":{"id":18163562,"uuid":"21263493","full_name":"keenwon/Tictac","owner":"keenwon","description":"简洁的倒计时组件","archived":false,"fork":false,"pushed_at":"2023-01-06T01:38:33.000Z","size":1006,"stargazers_count":64,"open_issues_count":4,"forks_count":23,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-04T01:06:36.388Z","etag":null,"topics":["javascript","stopwatch"],"latest_commit_sha":null,"homepage":"http://keenwon.com/1262.html","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keenwon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-06-27T04:03:51.000Z","updated_at":"2024-01-07T13:57:36.000Z","dependencies_parsed_at":"2022-07-26T21:32:07.538Z","dependency_job_id":null,"html_url":"https://github.com/keenwon/Tictac","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/keenwon/Tictac","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenwon%2FTictac","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenwon%2FTictac/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenwon%2FTictac/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenwon%2FTictac/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keenwon","download_url":"https://codeload.github.com/keenwon/Tictac/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keenwon%2FTictac/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267629248,"owners_count":24118182,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","stopwatch"],"created_at":"2024-12-03T19:12:24.664Z","updated_at":"2025-07-29T04:32:20.027Z","avatar_url":"https://github.com/keenwon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tictac\n\n[![NPM version][npm-image]][npm-url]\n[![Build status][circleci-image]][circleci-url]\n\ndemo: [https://keenwon.com/demo/201406/tictac](https://keenwon.com/demo/201406/tictac)  \nmore: [https://keenwon.com/1262/](https://keenwon.com/1262/)\n\n**目录**：\n\n\u003c!-- TOC --\u003e\n\n- [Example](#example)\n- [Usage](#usage)\n- [Api](#api)\n    - [`init`](#init)\n    - [`create`](#create)\n    - [`reset`](#reset)\n    - [`remove`](#remove)\n    - [`execute`](#execute)\n    - [`getCurrentTime`](#getcurrenttime)\n    - [`regulate`](#regulate)\n    - [`destroy`](#destroy)\n    - [格式化对象](#格式化对象)\n\n\u003c!-- /TOC --\u003e\n\n## Example\n\n```javascript\nTictac.init({\n  currentTime: Date.parse(\"2015/01/01 00:00:00\"), //设置当前时间\n  interval: 3000, //执行callback的时间间隔\n  callback: function() {\n    //重复执行的回调\n  }\n})\n\nTictac.create(\"id1\", {\n  targetId: \"id1\", //显示计时器的容器\n  expires: Date.parse(\"2050/01/01 00:00:00\"), //目标时间\n  format: {\n    //格式化对象\n    days: \"{d}天 \",\n    hours: \"{hh}小时 \",\n    minutes: \"{mm}分 \",\n    seconds: \"{ss}秒\"\n  },\n  timeout: function() {\n    //计时器 timeout 回调\n  }\n})\n\n//任意多个....\n\nTictac.create(\"idn\", {\n  targetId: \"idn\",\n  expires: Date.parse(\"2015/01/01 00:00:15\"),\n  format: {\n    minutes: \"{mm}分 \",\n    seconds: \"{ss}秒\"\n  },\n  timeout: function() {\n    //....\n  }\n})\n```\n\n## Usage\n\n两种安装方式：\n\n1. 使用 npm 安装\n\n```shell\nnpm install tictac.js --save // or yarn\n```\n\n2. 直接下载 `tictac.js` 使用\n\n## Api\n\n#### `init`\n\n初始化函数，注册计时器前必须先初始化。参数：\n\n- `currentTime`: 当前时间（时间戳），可设置服务端时间或者直接`+new Date()`\n- `interval`: 执行`callback` 的时间间隔\n- `callback`: 重复执行的回调函数\n\n具体例子看上面的就好了。\n\n#### `create`\n\n创建一个计时器，就像上面代码里写的那样，接受两个参数。第一个参数是 ID，一般用 string 或者 int 类型都可以，第二个参数是个对象，包含以下字段：\n\n- `targetId`: 字符串，输出“剩余时间字符串”的容器 ID\n- `expires`: 时间戳，计时器的目标时间（或者说是过期时间）\n- `format`: 倒计时时间的格式化对象，这个下面单独说\n- `formatIgnore`: 配合 `format` 使用的，下面和 `format` 一起说讲\n- `timeout`: 超时函数，到达 `expires` 指定的时间后触发\n\n具体例子上面代码里也有。\n\n#### `reset`\n\n重新设置计时器，参数与`create`方法完全相同。例如：\n\n```javascript\nTictac.reset(\"id5\", {\n  expires: 1403860277271\n})\n```\n\n#### `remove`\n\n根据 ID 删除一个计时器\n\n```javascript\nTictac.remove(\"id1\")\n```\n\n#### `execute`\n\n立即执行初始化时设置的 `callback` 回调。例如你指定每 5s 执行一次 `callback`，上一次执行 `callback` 后的 3s，调用 `Tictac.execute()` 会立刻再执行回调，再过 5s 会再次执行（注意，不是 2s 了）。\n\n#### `getCurrentTime`\n\n返回“当前”时间的时间戳，是根据初始化时设置的时间计算的。\n\n#### `regulate`\n\n接受一个时间戳，用来校正当前时间，需要使用服务端时间计时的时候，可以使用此方法定期校正。关于使用服务端计时的方案，可以参考[stackoverflow](http://stackoverflow.com/questions/1638337/the-best-way-to-synchronize-client-side-javascript-clock-with-server-date)。服务端计时精度还是不太满意，尤其是服务器压力大，并发量多的时候，我在项目中使用 Tictac 的时候，只在初始化的时候取了一次服务端时间，大家有什么好的方案欢迎交流。\n\n#### `destroy`\n\n销毁 Tictac 已经注册的所有计时器。\n\n#### 格式化对象\n\n所谓的“格式化对象”，就是用来显示倒计时的时间的。例如：5 分 12 秒。格式化对象一般是下面这样：\n\n```javascript\n{\n  days: '{d}天 ',\n  hours: '{hh}小时 ',\n  minutes: '{mm}分 ',\n  seconds: '{ss}秒'\n}\n```\n\n当然如果你只需要精确到天的话，可以只保留 `days`。另外，设置 `formatIgnore` 为 `true`（默认也是 true）的话，会隐藏空值，就拿上面的对象来说，如果现在离目标时间还有 n 多天，那么会完整的显示“XX 天 XX 小时 XX 分 XX 秒”，如果是同一天，就只显示“XX 小时 XX 分 XX 秒”。另外，`{hh}` 和 `{h}` 的区别就在于时数小于 10 的时候，例如 8，是显示 08 还是 8。\n\n[npm-image]: https://img.shields.io/npm/v/tictac.js.svg?style=flat-square\n[npm-url]: https://www.npmjs.com/package/tictac.js\n[circleci-image]: https://img.shields.io/circleci/project/github/keenwon/Tictac.svg?maxAge=3600\u0026logo=circleci\u0026style=flat-square\n[circleci-url]: https://circleci.com/gh/keenwon/Tictac\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeenwon%2Ftictac","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeenwon%2Ftictac","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeenwon%2Ftictac/lists"}