跳至主要内容

useCountDown

返回分鐘倒計時的 React 狀態鉤子。

Usage

即時編輯器

function Demo() {
  const now = new Date();
  const tomorrow = new Date();
  tomorrow.setDate(now.getDate() + 1);
  tomorrow.setHours(0, 0, 0, 0);
  const diffInSec = Math.floor((tomorrow.getTime() - now.getTime()) / 1000);

  // 如果您的應用程式在伺服器端運行,必須傳遞與客戶端相同的时间
  // 這個 demo 沒有在伺服器端運行
  const [hour, minute, second] = useCountDown(diffInSec);
  return (
    <div suppressHydrationWarning={true}>{`${hour}:${minute}:${second}`}</div>
  );
};

結果
13:19:12

API

useCountdown

Returns

readonly [string, string, string]: 包含以下元素的元組:

  • 小時。
  • 分鐘。
  • 秒數。

Arguments

參數名描述類型預設值
time时间差number (必填)-
format时间格式化函数((num: number) => [string, string, string]) | undefinedHH MM SS
callback倒计时结束的回调函数(() => void) | undefined-
Squarespace
Squarespace can simplify your workflow, making reviewing projects, sending documents, and getting paid a breeze.
Get Started