#reactjs
#reactjs
Вопрос:
Я пытаюсь добиться создания таймера обратного отсчета на 14 дней, и он не должен сбрасываться при обновлении страницы. Я уже сделал это, но проблема в том, что я не знаю, как добавить дату сейчас 14 дней, есть идеи о том, как это можно сделать. Спасибо, вы действительно цените вашу помощь.
Это мой код:
const Timer = () => {
const [timerDays, setTimerDays] = useState("00");
const [timerHours, setTimerHours] = useState("00");
const [timerMinutes, setTimerMinutes] = useState("00");
const [timerSeconds, setTimerSeconds] = useState("00");
let interval = useRef();
const startTimer = () => {
const countdownDate = new Date("Jan 17, 2021 00:00:00").getTime();
interval = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance < 0) {
clearInterval(interval.current);
} else {
setTimerDays(days);
setTimerHours(hours);
setTimerMinutes(minutes);
setTimerSeconds(seconds);
}
});
};
useEffect(() => {
const someref = interval.current;
startTimer();
return () => {
clearInterval(someref);
};
}, []);
};
Комментарии:
1. @codemonkey у вас есть какие-либо идеи о том, как сделать таймер обратного отсчета, который не сбрасывается, даже если браузер обновляется?
2. Можете ли вы добавить несколько примеров кода, мы можем вам помочь. Проблема настолько неясна.
3. Запустите обратный отсчет на сервере, а затем вызовите API, чтобы проверить, где находится обратный отсчет в любой момент времени.
4. Почему вы отредактировали вопрос и удалили код? Ваш предыдущий вопрос был намного более подробным, чем этот.
5. @yudhiesh Да, но это был также совершенно другой вопрос.
Ответ №1:
Вам нужен способ сохранить постоянное время в локальном хранилище, потому что вы хотите использовать таймер даже после обновления браузера. итак, вот что вам нужно сделать:
const Timer = () => {
const [timerDays, setTimerDays] = useState("00");
const [timerHours, setTimerHours] = useState("00");
const [timerMinutes, setTimerMinutes] = useState("00");
const [timerSeconds, setTimerSeconds] = useState("00");
let interval = useRef();
const startTimer = (countdownDate) => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance < 0) {
clearInterval(interval.current);
} else {
setTimerDays(days);
setTimerHours(hours);
setTimerMinutes(minutes);
setTimerSeconds(seconds);
}
};
function saveInLocalStorage(time) {
localStorage.setItem("timer", time);
}
function getTimeFromLocalStorage() {
return localStorage.getItem("timer");
}
useEffect(() => {
const localTimer = getTimeFromLocalStorage();
if (localTimer) {
interval.current = setInterval(() => {
startTimer( localTimer);
}, 1000);
} else {
const countdownDate = new Date().getTime() 14 * 24 * 60 * 1000;
saveInLocalStorage(countdownDate);
interval.current = setInterval(() => {
startTimer( countdownDate);
}, 1000);
}
return () => clearInterval(interval.current);
}, []);
return (
<div>
timerDays: {timerDays} amp;nbsp; timerHours: {timerHours} amp;nbsp;
timerMinutes: {timerMinutes} amp;nbsp; timerSeconds: {timerSeconds} amp;nbsp;
</div>
);
};
вот рабочая демонстрация: https://codesandbox.io/s/hardcore-sammet-9zj32?file=/src/App.js:84-1823
Комментарии:
1. Привет, спасибо, что ответили на мою проблему, это то, что я хотел, но обратный отсчет не движется, знаете ли вы причину этого еще раз спасибо
2. @AlifKhan Мой плохой, я ошибочно использовал
setTimeoutвместоsetInterval, поэтому я изменил свой ответ и добавил демонстрацию, чтобы вы могли ее увидеть,
Ответ №2:
Используйте localStorage. Надеюсь, это сработает.
const Timer = () => {
const [timerDays, setTimerDays] = useState(localStorage.getItem('days')?localStorage.getItem('days'):0);
const [timerHours, setTimerHours] = useState(localStorage.getItem('hours')?localStorage.getItem('days'):0);
const [timerMinutes, setTimerMinutes] = useState(localStorage.getItem('minutes')?localStorage.getItem('days'):0);
const [timerSeconds, setTimerSeconds] = useState(localStorage.getItem('seconds')?localStorage.getItem('days'):0);
let interval = useRef();
const startTimer = () => {
let countdownDate;
if(timerDays || timerHours || timerMinutes || timerSeconds)
countdownDate = new Date(timerDays,timerHours,timerMinutes,timerSeconds).getTime();
else countdownDate = new Date("Jan 17, 2021 00:00:00").getTime();
interval = setInterval(() => {
const now = new Date().getTime();
const distance = countdownDate - now;
const days = Math.floor(distance / (1000 * 60 * 60 * 24));
const hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
if (distance < 0) {
clearInterval(interval.current);
localStorage.removeItem('days');
localStorage.removeItem('hours');
localStorage.removeItem('minutes');
localStorage.removeItem('seconds');
} else {
setTimerDays(days);
setTimerHours(hours);
setTimerMinutes(minutes);
setTimerSeconds(seconds);
localStorage.setItem('days',days);
localStorage.setItem('hours',hours);
localStorage.setItem('minutes',minutes);
localStorage.setItem('seconds',seconds);
}
});
};
useEffect(() => {
const someref = interval.current;
startTimer();
return () => {
clearInterval(someref);
};
}, []);
};
Комментарии:
1. Привет, спасибо за ответ, он работает, но когда я обновляю все время, становится 0
2. Я должен обновить 2 раза, чтобы он вернулся