Countdown 倒计时

带可自定义格式和样式的倒计时器。

引入

import { Countdown } from 'asterui'

示例

基本倒计时

简单的倒计时器。

</>

01:00:00

import { Countdown } from 'asterui'
import { useMemo } from 'react'

function App() {
  const target = useMemo(() => Date.now() + 60 * 60 * 1000, [])
  
  return (
      <Countdown value={target} />
    )
}

export default App

带天数

在倒计时中包含天数。

</>

03:00:00:00

import { Countdown } from 'asterui'
import { useMemo } from 'react'

function App() {
  const target = useMemo(() => Date.now() + 3 * 24 * 60 * 60 * 1000, [])
  
  return (
      <Countdown value={target} format="DD:HH:MM:SS" />
    )
}

export default App

尺寸

不同的尺寸变体。

</>

01:00:00

01:00:00

01:00:00

01:00:00

import { Countdown, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [target] = useState(() => Date.now() + 60 * 60 * 1000)
  
  return (
      <Space direction="vertical" size="lg">
        <Countdown value={target} size="xs" />
        <Countdown value={target} size="sm" />
        <Countdown value={target} size="md" />
        <Countdown value={target} size="lg" />
      </Space>
    )
}

export default App

带标签

在每个单位下显示标签。

</>

02days

00hours

00min

00sec

import { Countdown } from 'asterui'
import { useState } from 'react'

function App() {
  const [target] = useState(() => Date.now() + 2 * 24 * 60 * 60 * 1000)
  
  return (
      <Countdown
        value={target}
        format="DD:HH:MM:SS"
        showLabels
      />
    )
}

export default App

盒装样式

每个单位在样式化的盒子中。

</>

01days

00hours

00min

00sec

import { Countdown } from 'asterui'
import { useState } from 'react'

function App() {
  const [target] = useState(() => Date.now() + 24 * 60 * 60 * 1000)
  
  return (
      <Countdown
        value={target}
        format="DD:HH:MM:SS"
        showLabels
        boxed
      />
    )
}

export default App

带回调

倒计时完成时执行回调函数。

</>

00:20

import { Countdown, notification } from 'asterui'
import { useState } from 'react'

function App() {
  const [target, setTarget] = useState(() => Date.now() + 20 * 1000)
  
  const handleFinish = () => {
    notification.success({ message: 'Countdown finished!' })
    setTarget(Date.now() + 20 * 1000) // Restart
  }
  
  return (
      <Countdown
        key={target}
        value={target}
        format="MM:SS"
        onFinish={handleFinish}
      />
    )
}

export default App

API

Countdown

属性	描述	类型	默认值
value	目标时间戳（毫秒）或 Date 对象	number | Date	-
format	格式字符串：‘D’ 天、‘H’ 小时、‘M’ 分钟、‘S’ 秒	string	'HH:MM:SS'
onFinish	倒计时达到零时的回调函数	() => void	-
onChange	每次计时变化时的回调函数，带剩余时间	(value: number) => void	-
size	尺寸变体	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'
showLabels	在每个单位下显示标签	boolean	false
labels	每个单位的自定义标签	{ days?: string, hours?: string, minutes?: string, seconds?: string }	-
boxed	在每个单位周围显示盒装样式	boolean	false
className	额外的 CSS 类名	string	-

无障碍

• 使用 aria-live 宣布倒计时更新
• 为每个倒计时单位提供 aria-label
• 标签在视觉上与其值关联