Question

在ReactJS中，我需要从“ 09/19/2020”开始倒数计时器，并将其全部显示在我的页面上该计时器认为的月，日，小时等对于此计时器，它可以计算某个时间点的月份，天数，小时数等。不是在任何日期之前，而是在某个日期之前。从“ 09/19/2020”开始可用

我的代码：

import React from "react";

const Timer = () => {
}

export default Timer

Answer 1

您可以将过去的日期时间转换为unix时间，并从当前的日期时间中减去unix时间，然后将时差转换回所需的任何时间。每秒执行一次以获得计时器。

您还可以使用moment.js之类的库，该库具有.unix()函数，可轻松进行转换。

Answer 2

尝试使用此示例：

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应该由您完成，以分钟为单位计算实际差异。您还需要为日/月等创建此类函数。或者更改为单个函数，以返回具有所有差异的对象。

如何从特定日期开始倒数计时器

2 个答案: