如何从特定日期制作倒数计时器

Question

In ReactJS, I need to make a countdown timer from "09/19/2020" and have it all displayed on my page What this timer considered month, days, hours, etc. For this timer to count the month, days, hours, etc. from a certain point in time. Not BEFORE any date, but FROM a certain date. Available from "09/19/2020"

My code:

import React from "react";

const Timer = () => {
}

export default Timer

Answer 1

You can convert the past datetime to unix time and subtract that from the current datetime in unix time, and then convert the difference back to whatever display of time you want. Do this every second to obtain a timer.

You could also use a library like moment.js , which has a .unix() function to convert easily.

Answer 2

Try using this example:

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>
  );
};

Put this in a separate component file called eg CountdownTimer . And then you can use it in your app.

See the full example here: https://codesandbox.io/s/react-playground-forked-vmqvy?file=/CountdownTimer.js

PS calcDiffInMinutes should be done by you to calculate real diff in minutes. You'll also need to create such functions for days/months etc. Or change to single function that returns an object with all the differences.