React实现倒计时

最新推荐文章于 2024-02-28 17:52:06 发布

iimmhy

最新推荐文章于 2024-02-28 17:52:06 发布

阅读量2.2k

点赞数 1

分类专栏：我的React的学习记录文章标签： react.js

本文链接：https://blog.csdn.net/WliU_LI/article/details/119936538

版权

我的React的学习记录专栏收录该内容

14 篇文章 1 订阅

订阅专栏

该博客介绍了如何在React中实现倒计时功能。通过`useEffect`和`useState`钩子，创建一个倒计时组件，从指定日期开始进行倒计时，并在倒计时结束后清空显示。代码中解决了倒计时可能存在的延迟问题，确保时间准确无误地更新。

摘要由CSDN通过智能技术生成

React实现倒计时

import { useEffect, useState } from "react";

export const useTimer = (t: Date) => {
  const [time, setTime] = useState("");

  useEffect(() => {
    const timer = () => {
      const total = Number(t) - Number(new Date());
      if (total <= 0) {
        setTime("");
        return;
      }

      const seconds = Math.floor((total / 1000) % 60)
        .toString()
        .padStart(2, "0");
      const minutes = Math.floor((total / 1000 / 60) % 60)
        .toString()
        .padStart(2, "0");
      const hours = Math.floor(total / (1000 * 60 * 60))
        .toString()
        .padStart(2, "0");

      setTime(`${hours}:${minutes}:${seconds}`);
    };

    const t1 = setInterval(() => {
      timer();
    }, 1000);
    // 解决延时一秒
    timer();

    return () => {
      clearInterval(t1);
    };
  }, [t]);

  return time;
};