react倒计时组件

最新推荐文章于 2025-05-07 15:43:09 发布

你亦老

最新推荐文章于 2025-05-07 15:43:09 发布

阅读量1.6k

点赞数

文章标签： react.js 前端 reactjs

本文链接：https://blog.youkuaiyun.com/weixin_57229715/article/details/122214546

版权

本文将介绍如何在React.js中实现一个前端倒计时组件，展示具体的时间倒计时效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如图效果是：后面时间倒计时

import React, { useState, useEffect } from 'react';
import moment from 'moment';
/**
 * 秒转分钟
 * @param {Number|String} sec 秒
 */
 const secondsToMinutes = sec => {
  sec = Number(sec);
  let minutes = moment.duration(sec, 'seconds').minutes();
  let seconds = moment.duration(sec, 'seconds').seconds();
  minutes < 10 ? (minutes = '0' + minutes) : minutes;
  seconds < 10 ? (seconds = '0' + seconds) : seconds;
  return minutes + ':' + seconds;
};

function clock(props) {
  const { className, endTime } = props;
  const [date, setDate] = useState(moment(endTime).diff(moment(), 'seconds'));
  useEffect(() => {
    const tick = () => setDate(moment(endTime).diff(moment(), 'seconds'));
    const timerId = setTimeout(tick, 1000);
    // 返回一个清除函数， 清除函数会在组件卸载前执行，执行当前effect前对上一个effect进行清除
    return () => clearTimeout(timerId);
  }, [date]);
  return <span className={className}>{secondsToMinutes(date)}</span>;
}

export default clock;