如何在我的ReactJS应用程序中添加倒计时计时器

Question

我是ReactJS的新手，正在尝试实现Countdown Timer，但在我当前的代码中，我需要刷新页面以显示实际的倒计时。我有两个约会时间未来日期时间和(2(当前日期时间和我需要根据这些日期时间的差异显示不同的状态。(a( 。如果将来的日期和今天的日期相同，我的状态将为今天(b(。如果还有1小时才能到达未来日期，则我需要从59:59开始显示倒计时计时器(c( 。一旦倒计时结束，我的状态将为LIVE

任何帮助都将不胜感激。提前谢谢。。

import React, { useEffect, useRef, useState } from "react";
import moment from "moment";
let sDate = "2021-04-26T18:46:00.000Z";
let formatted_sDate = moment(sDate).utc().format("MM/DD/YYYY HH:mm:ss");
let eDate = moment(new Date()).format("MM/DD/YYYY HH:mm:ss");
const ONE_HOUR = 3600;
// compare two dates & get diff in days
function getDateDifferenceInDays(s, e) {
const sDate = moment(s);
const eDate = moment(e);
const days = sDate.diff(eDate, "days");
return days;
}
// compare two dates & get diff in seconds
function getTimeDifferenceInSeconds(s, e) {
const sDate = moment(s);
const eDate = moment(e);
const seconds = sDate.diff(eDate, "seconds");
return seconds;
}
function format(time) {
// Hours, minutes and seconds
var hrs = ~~(time / 3600);
var mins = ~~((time % 3600) / 60);
var secs = ~~time % 60;
// Output like "1:01" or "4:03:59" or "123:03:59"
var ret = "";
if (hrs > 0) {
ret += "" + hrs + ":" + (mins < 10 ? "0" : "");
}
ret += "" + mins + ":" + (secs < 10 ? "0" : "");
ret += "" + secs;
return ret;
}
export default function App() {
const timerBeforeCountDown = useRef();
const currentTimer = useRef();
const [time, setTime] = useState(null);
const [startCurrentTimer, setStartCurrentTimer] = useState(false);
useEffect(() => {
const diffInDays = getDateDifferenceInDays(formatted_sDate, eDate);
const diffInSeconds = getTimeDifferenceInSeconds(formatted_sDate, eDate);
if (diffInDays === 0) {
if (diffInSeconds > ONE_HOUR) {
setTime(diffInSeconds);
setStartCurrentTimer(false);
timerBeforeCountDown.current = setInterval(() => {
setTime((prev) => {
if (prev > ONE_HOUR) {
return prev - 1;
} else {
setStartCurrentTimer(true);
clearInterval(timerBeforeCountDown.current);
}
});
}, 1000);
} else if (diffInSeconds <= ONE_HOUR && diffInSeconds > 0) {
setTime(diffInSeconds);
setStartCurrentTimer(true);
currentTimer.current = setInterval(() => {
if (time > 0) {
setTime((prev) => {
if (prev > 0) {
return prev - 1;
} else {
return prev;
}
});
} else {
clearInterval(currentTimer.current);
}
}, 1000);
} else {
return null;
}
} else {
return null;
}
// clear intervel
return () => {
clearInterval(timerBeforeCountDown.current);
clearInterval(currentTimer.current);
};
}, [startCurrentTimer]);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>{time !== null && time > ONE_HOUR && "TODAY"}</h2>
<h2>{time !== null && time <= ONE_HOUR && time > 0 && format(time)}</h2>
<h2>{time === 0 && "LIVE"}</h2>
</div>
);
}

Answer 1

这里有很多事情要做，不需要时间。由于你是新来的，我为你的回购分叉，这样你就可以看到一种更简单的方法来实现同样的目标。您在报税表中的支票也将始终返回内容。

import { useEffect, useState } from "react";
export const useCountdownTimer = (date) => {
const [seconds, setTimer] = useState(date - Date.now());
useEffect(() => {
const timeout = setTimeout(() => setTimer(seconds - 1), 1000);
if (seconds <= 0) clearTimeout(timeout);
return () => {
clearTimeout(timeout);
};
}, [seconds]);
const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, "0");
const s = Math.floor(seconds % 60).toString().padStart(2, "0");
return {
seconds,
time: `${m}:${s}`
};
};
export default function App() {
// const date = new Date("2021-04-26T18:46:00.000Z").getTime();
const date = Date.now() + 3603; // 1 hour & 3 seconds from now for demo
const { seconds, time } = useCountdownTimer(date); // date must be in seconds
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
{!!seconds && seconds >= 3600 && <h2>TODAY</h2>}
{!!seconds && seconds < 3600 && <h2>{time}</h2>}
{seconds <= 0 && <h2>LIVE</h2>}
</div>
);
}

https://codesandbox.io/s/reactcounterv2-forked-fsnwr?file=/src/App.js

Answer 2

试试这个https://www.npmjs.com/package/@nilevia/倒计时计时器反应如果您需要源代码，请转到github页面