如何在React中显示倒数计时器

发布于 2025-02-10 16:54:41 字数 452 浏览 1 评论 0原文

我正在使用Moment.js。如果事件延迟，我想显示一个计数计时器。我正在从BE那里获得事件，但我不确定如何在当前时间上显示计时器。

到目前为止，我已经尝试过这样的尝试，

const currentDateAndTime = moment().format('YYYY-MM-DD HH:mm');
const eventStartDateAndTime = moment.tz(moment(eventStartDate).format('YYYY-MM-DD HH:mm'), timeZone).local();

我想在这里显示倒数计时器 https://prnt.sc/kxqbjqbjqofab6m 您能帮我逻辑吗？

原文

I am using moment.js.
I want to show a count down timer if an event is delayed.
I am getting the eventStartDate from the BE but I am not sure how to show timer with respect to current time.

So far I have tried like this

const currentDateAndTime = moment().format('YYYY-MM-DD HH:mm');
const eventStartDateAndTime = moment.tz(moment(eventStartDate).format('YYYY-MM-DD HH:mm'), timeZone).local();

I want to show the countdown timer here
https://prnt.sc/kXqBjQOFab6m
Can you please help me with the logic?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑红尘 2025-02-17 16:54:41

我认为，您会从中得到这个想法。阅读有关“使用效应”和清理的信息。

function Timer() {
  const [state,setState] = useState(0);

  useEffect(()=> {
    // Increase state with every 1 second
    const interval = setInterval(()=> setState(prevState => prevState + 1),1000)
    // Clean up interval
    return ()=> interval;
  },[])

  return (
    <div>
      <h1>{state}</h1>
    </div>
  )
}

I think, you will get the idea from this. Read about 'useEffect' and cleanup.

function Timer() {
  const [state,setState] = useState(0);

  useEffect(()=> {
    // Increase state with every 1 second
    const interval = setInterval(()=> setState(prevState => prevState + 1),1000)
    // Clean up interval
    return ()=> interval;
  },[])

  return (
    <div>
      <h1>{state}</h1>
    </div>
  )
}

回复收藏 0 原文

~没有更多了~