时间/计时/倒计时组件

地址：功能演示-demo

这是一个展示时间、计时、倒计时的组件。 基于 React 开发。 主要功能包括：

• 展示当前时间
• 展示显示计时（电脑锁屏、笔记本盒盖不中断计时）
• 展示倒计时
• 些许动画效果

安装

npm i time-runner

或者

yarn add time-runner

页面引入

import { TimeRunner } from "time-runner";
// 1.0.3 版本开始，不需要引入css文件了
// import "time-runner/dist/time-runner.css";

使用说明

// 当前时间
<TimeRunner />
// 计时器
<TimeRunner showType="count" />
// 倒计时
<TimeRunner showType="2025-10-31" />

// 当前时间 + 翻牌效果
<TimeRunner mode="card" />
// 计时器 + 翻牌效果
<TimeRunner mode="card" showType="count" />
// 倒计时 + 翻牌效果
<TimeRunner mode="card" showType="2025-10-31" />

// 当前时间 + 翻转（左右）
<TimeRunner mode="cube-h" />
// 计时器 + 翻转（左右）
<TimeRunner mode="cube-h" showType="count" />
// 倒计时 + 翻转（左右）
<TimeRunner mode="cube-h" showType="2025-10-31" />

// 当前时间 + 翻转（上下）
<TimeRunner mode="cube-v" />
// 计时器 + 翻转（上下）
<TimeRunner mode="cube-v" showType="count" />
// 倒计时 + 翻转（上下）
<TimeRunner mode="cube-v" showType="2025-10-31" />

组件属性（props）

/** 
 * 显示模式，默认：default
 * default: 当前时间  
 * count: 计时器  
 * 指定时间：倒计时。
 */
showType?: string;
/** 
 * 动画模式，
 * card：卡片  
 * cube-v：上下翻转  
 * cube-h：左右翻转
 * drift：漂浮
 */
mode?: TransMode;
/** 倒计时结束后执行的方法 */
finishCountFn?: Function;
/** 尺寸，默认40 */
size?: number;
/** 自定义样式类名 */
className?: string;
/** 背景颜色 */
bgColor?: string;
/** 边框颜色 */
borderColor?: string;
/** 文字阴影颜色值 */
textShadowColor?: string;

倒计时传入日期的格式

"YYYY-MM-DD",
"YYYY/MM/DD",
"YYYY-MM-DD HH:mm",
"YYYY/MM/DD HH:mm",
"YYYY-MM-DD HH:mm:ss",
"YYYY/MM/DD HH:mm:ss",

React版本

"react": ">=16.8.0",
"react-dom": ">=16.8.0"

更新日志

[1.0.5] - 2025-11-16

更新内容

• 更新Readme内容

[1.0.4] - 2025-11-16

更新内容

• 更新Readme内容

[1.0.3] - 2025-11-16

更新内容【Breaking Change】

• 移除 “time-runner/dist/time-runner.css”文件引入
• 增加 textShadowColor（文字阴影颜色）属性
• 更新Readme内容，增加功能演示地址。

[1.0.2] - 2025-10-11

更新内容

• 增加 mode = "drift" 效果
• 更新Readme内容

[1.0.1] - 2025-10-07

更新内容

• 更新readme内容

[1.0.0] - 2025-10-07

首次发布