我正试图为圣诞节做一个倒计时计时器，发现这个视频很有用。它使用React和Day.js包。如果我手动设置圣诞节日期时间戳，效果很好。然而，有两个目标函数我不能弄清楚。
-
使定时器消失并显示&;Christmas today&;在圣诞节当天播放24小时。
-
一旦当前日期达到12月26日，自动设置新的timeStampDayJs到下一个圣诞节?
目前，我必须在圣诞节到来后手动设置下一个圣诞节时间戳，并且我不能自动显示"今天是圣诞节"。在圣诞节那天。有什么方法可以让我自动实现这两个目标吗?
我在这里的代码(大部分与YouTube视频相同，但我手动设置了圣诞节时间戳):
import { useState, useEffect } from "react";
import dayJs from "dayjs";
var utc = require("dayjs/plugin/utc");
var timezone = require("dayjs/plugin/timezone");
dayJs.extend(utc);
dayJs.extend(timezone);
const defaultRemainingTime = {
seconds: "00",
minutes: "00",
hours: "00",
days: "00",
};
const Countdown = () => {
const [remainingTime, setRemainingTime] = useState(defaultRemainingTime);
const countdownTimeStamp = 1671919200000;
const getRemainingTime = (countdownTimeStamp) => {
const timeStampDayJs = dayJs(countdownTimeStamp).tz("Europe/Helsinki");
const nowDayJs = dayJs().tz("Europe/Helsinki");
if (timeStampDayJs.isBefore(nowDayJs)) {
return defaultRemainingTime;
}
return {
seconds: getRemainingSeconds(nowDayJs, timeStampDayJs),
minutes: getRemainingMinutes(nowDayJs, timeStampDayJs),
hours: getRemainingHours(nowDayJs, timeStampDayJs),
days: getRemainingDays(nowDayJs, timeStampDayJs),
};
};
const getRemainingSeconds = (nowDayJs, timeStampDayJs) => {
const seconds = timeStampDayJs.diff(nowDayJs, "seconds") % 60;
return padWithZeros(seconds, 2);
};
const getRemainingMinutes = (nowDayJs, timeStampDayJs) => {
const minutes = timeStampDayJs.diff(nowDayJs, "minutes") % 60;
return padWithZeros(minutes, 2);
};
const getRemainingHours = (nowDayJs, timeStampDayJs) => {
const hours = timeStampDayJs.diff(nowDayJs, "hours") % 24;
return padWithZeros(hours, 2);
};
const getRemainingDays = (nowDayJs, timeStampDayJs) => {
const days = timeStampDayJs.diff(nowDayJs, "days");
return days;
};
const padWithZeros = (number, minLength) => {
const numberString = number.toString();
if (numberString.length >= minLength) {
return numberString;
} else {
return "0".repeat(minLength - numberString.length) + numberString;
}
};
useEffect(() => {
const intervalId = setInterval(() => {
updateRemaninigTime(countdownTimeStamp);
}, 1000);
return () => clearInterval(intervalId);
}, [countdownTimeStamp]);
const updateRemaninigTime = (countdownTimeStamp) => {
setRemainingTime(getRemainingTime(countdownTimeStamp));
};
return (
<div>
<span>{remainingTime.days} </span>
<span>days </span>
<span>{remainingTime.hours} </span>
<span>hours </span>
<span>{remainingTime.minutes} </span>
<span>minutes </span>
<span>{remainingTime.seconds} </span>
<span>seconds </span>
</div>
);
};
export default Countdown;
你可以使用两个函数来实现你的目标!
import { useState, useEffect } from "react";
import dayJs from "dayjs";
var utc = require("dayjs/plugin/utc");
var timezone = require("dayjs/plugin/timezone");
dayJs.extend(utc);
dayJs.extend(timezone);
const defaultRemainingTime = {
seconds: "00",
minutes: "00",
hours: "00",
days: "00",
initialValue: true,
};
const Countdown = () => {
const [remainingTime, setRemainingTime] = useState(defaultRemainingTime);
function getNextChristimaDay(){
let today = dayJs().tz("Europe/Helsinki");
let christmasYear = today.year();
if (today.month() == 11 && today.day() > 25) {
christmasYear = christmasYear + 1;
}
let christmasDate = new Date(christmasYear, 11, 25);
const christmasDateTimeStamp =
Math.round(christmasDate.getTime());
return christmasDateTimeStamp;
}
useEffect(() => {
const getRemainingSeconds = (nowDayJs, timeStampDayJs) => {
const seconds = timeStampDayJs.diff(nowDayJs, "seconds") % 60;
return padWithZeros(seconds, 2);
};
const getRemainingMinutes = (nowDayJs, timeStampDayJs) => {
const minutes = timeStampDayJs.diff(nowDayJs, "minutes") % 60;
return padWithZeros(minutes, 2);
};
const getRemainingHours = (nowDayJs, timeStampDayJs) => {
const hours = timeStampDayJs.diff(nowDayJs, "hours") % 24;
return padWithZeros(hours, 2);
};
const getRemainingDays = (nowDayJs, timeStampDayJs) => {
const days = timeStampDayJs.diff(nowDayJs, "days");
return days;
};
const padWithZeros = (number, minLength) => {
const numberString = number.toString();
if (numberString.length >= minLength) {
return numberString;
} else {
return "0".repeat(minLength - numberString.length) + numberString;
}
};
const getRemainingTime = () => {
const timeStampDayJs = dayJs(getNextChristimaDay()).tz("Europe/Helsinki");
const nowDayJs = dayJs().tz("Europe/Helsinki");
return {
seconds: getRemainingSeconds(nowDayJs, timeStampDayJs),
minutes: getRemainingMinutes(nowDayJs, timeStampDayJs),
hours: getRemainingHours(nowDayJs, timeStampDayJs),
days: getRemainingDays(nowDayJs, timeStampDayJs),
};
};
setInterval(() => {
setRemainingTime(getRemainingTime());
}, 1000);
}, [setRemainingTime]);
function showMessage(d, h, m, s){
if(d <= 0 && h <= 0 && m <= 0 && s <= 0){
return <span>Happy Christmas!</span>
} else {
return (
<>
<span>{d}</span>
<span>days </span>
<span>{h}</span>
<span>hours </span>
<span>{m}</span>
<span>minutes </span>
<span>{s}</span>
<span>seconds </span>
</>
)
}
}
const { days, hours, minutes, seconds, initialValue } = remainingTime;
return (
<div>
{!initialValue && showMessage(days, hours, minutes, seconds)}
</div>
);
};
export default Countdown;
我重新编写了你的代码，并把两个主要函数放在上面:
// this code you will use to discover the next Christmas day in timestamp, then you can not worry about the fixed timestamp value.
function getNextChristimaDay(){
let today = dayJs().tz("Europe/Helsinki");
let christmasYear = today.year();
if (today.month() == 11 && today.day() > 25) {
christmasYear = christmasYear + 1;
}
let christmasDate = new Date(christmasYear, 11, 25);
const christmasDateTimeStamp =
Math.round(christmasDate.getTime());
return christmasDateTimeStamp;
}
// In this step we resolved a problem with fixed text about remaning days or happy Christmas.
function showMessage(d, h, m, s){
if(d <= 0 && h <= 0 && m <= 0 && s <= 0){
return <span>Happy Christmas!</span>
} else {
return (
<>
<span>{d}</span>
<span>days </span>
<span>{h}</span>
<span>hours </span>
<span>{m}</span>
<span>minutes </span>
<span>{s}</span>
<span>seconds </span>
</>
)
}
}