从当前日期开始倒计时 5 分钟

Question

新来这里作出反应。我正在尝试将倒数计时器输出到从现在起设置为 5 分钟的日期。但我所能得到的只是倒计时橡皮筋，或者 5 分钟或 0 分钟时的静态。目前，它在 00:00:00:00 时是静态的。谢谢

编辑：我试图让它与钩子一起工作，而不是通过构造函数 class。

从“./aButton”导入 AButton；从 'react';

导入 { useState, useRef, useEffect}

export default function Countdown() {
        
        const [addTime, setAddtime] = useState();
        const [countdown, setCountdown] = useState((new Date()).toLocaleTimeString());

        const [timerDays, setDays] = useState('00');
        const [timerHours, setHours] = useState('00');
        const [timerMinutes, setMinutes] = useState('00');
        const [timerSeconds, setSeconds] = useState('00');

        let interval = useRef();

        const oldDateObject = new Date();
        const sourceDate = oldDateObject.getTime(); // date - 300000
        const diff = 5;
        //this gives use the unix timestamp of the future date which is the current date + 5 minutes
        const futureDate = new Date(oldDateObject.getTime() + diff*60000); //300000
        

        const convertToDate = (date, hours, minutes, seconds) => {
                
        
        date = new Date(sourceDate * 1000);
        // Hours part from the timestamp
        hours = date.getHours();
        // Minutes part from the timestamp
        minutes = ("0" + date.getMinutes()).substr(-2);
        // Seconds part from the timestamp
        seconds = ("0" + date.getSeconds()).substr(-2);

        return hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
        }

        const startTimer = () => {
                const timeUpdate = new Date().getTime(convertToDate);
        interval = setInterval(() => {  
        const now = new Date().getTime();
        const timeDifference = timeUpdate - now;
        
        //this converts the unix code of the future date to each clock element every second
        const days = Math.floor(timeDifference / (24 * 60 * 60 * 1000));
        const hours = Math.floor(timeDifference % (24 * 60 * 60 * 1000) / (60 * 60 * 1000));;
        const minutes = Math.floor(timeDifference % (60 * 60 * 1000) / (60 * 1000));;
        const seconds = Math.floor(timeDifference % (60 * 1000) / 1000);;
        

        if (timeDifference < 0) {
                clearInterval(interval.current);
        } else {
                setDays(days);
                setHours(hours);
                setMinutes(minutes);
                setSeconds(seconds);
        }

        }, 1000);
};

useEffect(() => {
        startTimer();
        return () => { clearInterval(interval.current); 
        };
});
        
        return (
        <div>
        <h1>{countdown === null ? <span style={{padding: '50px'}}></span> : countdown}</h1>
        <button onClick={ () => setCountdown(countdown !== null ? null : ( new Date()).toLocaleTimeString())}>{countdown === null ? 'Show' : 'Hide'}</button>
        <div>----------------</div>
        <h1>{timerDays} : {timerHours} : {timerMinutes} : {timerSeconds}</h1>
        <button>Activate countdown</button>
        </div>
        )
}

Answer 1

看看

和

https://www.npmjs.com/package/react-countdown-circle-timer

Answer 2

我认为你让它变得比需要的复杂得多。

将 5 分钟倒计时（以秒为单位）的状态和第二个状态存储到 start/run 计时器。

当计时器启动时，倒计时状态为 5 分钟（它将从当前时间点开始计时）。

从单个倒计时状态计算派生和格式化时间。

function App() {
  const [countDown, setCountDown] = React.useState(0);
  const [runTimer, setRunTimer] = React.useState(false);

  React.useEffect(() => {
    let timerId;

    if (runTimer) {
      setCountDown(60 * 5);
      timerId = setInterval(() => {
        setCountDown((countDown) => countDown - 1);
      }, 1000);
    } else {
      clearInterval(timerId);
    }

    return () => clearInterval(timerId);
  }, [runTimer]);

  React.useEffect(() => {
    if (countDown < 0 && runTimer) {
      console.log("expired");
      setRunTimer(false);
      setCountDown(0);
    }
  }, [countDown, runTimer]);

  const togglerTimer = () => setRunTimer((t) => !t);

  const seconds = String(countDown % 60).padStart(2, 0);
  const minutes = String(Math.floor(countDown / 60)).padStart(2, 0);

  return (
    <div className="App">
      <div>
        Time: {minutes}:{seconds}
      </div>

      <button type="button" onClick={togglerTimer}>
        {runTimer ? "Stop" : "Start"}
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />,
  rootElement
);

.App {
  font-family: sans-serif;
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

从当前日期开始倒计时 5 分钟

Countdown timer to 5 minutes from current date

javascript

reactjs

react-hooks

countdown

countdowntimer