问如何从特定日期开始设置倒计时计时器
EN

Stack Overflow用户

提问于 2020-09-30 19:38:48

回答 2查看 914关注 0票数 0

在ReactJS中，我需要从"09/19/2020“做一个倒计时计时器，并在我的页面上显示所有这个计时器考虑的月，天，小时等，这个计时器从某个时间点开始计算月，日，小时等。不是在任何日期之前，而是从某个日期开始。从"09/19/2020“开始提供

我的代码：

import React from "react";

const Timer = () => {
}

export default Timer

javascript

reactjs

nodes

Stack Overflow用户

发布于 2020-09-30 20:12:32

试着使用这个例子：

import React, { useState, useEffect } from "react";

function calcDiffInMinutes(dateA, dateB) {
  return Math.floor(((dateA.getTime() - dateB.getTime()) / 1000) % 60); // TODO CALCULATIONS HERE
}

export default ({ dateFrom }) => {
  const [currentDate, setCurrentDate] = useState(new Date());
  const [minutesDiff, setMinutesDiff] = useState(
    calcDiffInMinutes(currentDate, dateFrom)
  );

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setCurrentDate(new Date());
    }, 1000);

    return () => clearTimeout(timeoutId);
  }, [currentDate]);

  useEffect(() => {
    setMinutesDiff(calcDiffInMinutes(currentDate, dateFrom));
  }, [currentDate, dateFrom]);

  return (
    <div>
      <div>Date From: {dateFrom.toISOString()}</div>
      <div>CountDown value: {minutesDiff}</div>
    </div>
  );
};

将其放入一个单独的组件文件中，例如CountdownTimer。然后你就可以在你的应用中使用它了。

在这里查看完整的示例：https://codesandbox.io/s/react-playground-forked-vmqvy?file=/CountdownTimer.js

P.S. calcDiffInMinutes应该由你在几分钟内计算出真正的差值。您还需要为天/月等创建这样的函数，或者更改为返回具有所有差异的对象的单个函数。

票数 0

查看全部 2 条回答

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64136794

复制

相似问题

问如何从特定日期开始设置倒计时计时器
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从特定日期开始设置倒计时计时器EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从特定日期开始设置倒计时计时器
EN