@kne/count-down v0.2.2

count-down

描述

显示倒计时.

安装

npm i --save @kne/count-down

概述

CountDown 倒计时组件

组件概述

一个基于React的通用倒计时组件，支持自定义时长、格式、单位，提供播放控制、进度回调等功能。

功能特性

• 🕒 支持秒/毫秒级倒计时
• ⏯️ 自动播放/手动暂停控制
• 🔄 可重置倒计时
• 📊 实时进度回调
• 🎚️ 自定义时间显示格式
• 🎛️ 支持ref控制方法

基本用法

import CountDown from './CountDown';

// 基础倒计时（60秒，自动播放）
<CountDown />

// 带格式和回调的倒计时
<CountDown 
  format="mm分ss秒" 
  onProgress={(time) => console.log('剩余:', time)}
  onComplete={() => console.log('倒计时结束')}
/>

时间格式示例

• HH:mm:ss → 00:01:30
• mm分ss秒 → 01分30秒
• s[s] → 90（纯秒数）

注意事项

1. 需要项目安装dayjs及其duration插件
2. 单位切换时需确保duration值匹配单位
3. 精确控制建议使用milliseconds单位

Timer 计时器组件文档

组件概述

一个基于React的可控计时器组件，提供精确的时间控制、状态切换和实时回调功能，适合需要精细时间管理的场景。

核心功能

• ⏱️ 精确计时控制
• ⏯️ 播放/暂停状态切换
• 🔄 时间重置功能
• 📊 实时获取当前时间
• 🎛️ 外部Ref控制接口

基本用法

import Timer from './Timer';

// 创建计时器引用
const timerRef = useRef();

// 渲染组件
<Timer ref={timerRef} />

// 控制示例
timerRef.current?.switch(); // 切换播放/暂停

示例

示例样式

.ant-card {
  border-color: black;
  text-align: center;
  width: 200px;
}

示例代码

• 这里填写示例标题
• 这里填写示例说明
• _CountDown(@kne/current-lib_count-down)import * as _CountDown from "@kne/count-down"

const { default: CountDown, Timer } = _CountDown;

const BaseExample = () => {
  return (
    <><div>
      <CountDown />
    </div>
    <div>
      <Timer />
    </div>
    </>
  );
};

render(<BaseExample />);

API

Ref 方法

通过ref可调用以下控制方法：

const countdownRef = useRef();

// 暂停
countdownRef.current?.pause();

// 继续
countdownRef.current?.continue();

// 重置
countdownRef.current?.restart();

<CountDown ref={countdownRef} />

Timer

单位说明

• seconds: 秒级计时（1 = 1秒）
• milliseconds: 毫秒级计时（1000 = 1秒）

格式示例

Ref 控制方法

通过ref可调用以下控制方法：

// 典型控制流程示例
timerRef.current.restart();  // 重置
timerRef.current.switch();   // 开始计时
const currentTime = timerRef.current.getTime(); // 获取时间