Я пытаюсь установить таймер обратного отсчета на 14 дней, и он не должен сбрасываться при обновлении страницы. Я уже сделал это, но проблема в том, что я не знаю, как добавить дату сейчас + 14 дней любые ...

0
user13986186 16 Янв 2021 в 09:37

2 ответа

Лучший ответ

Вам нужен способ сохранить постоянное время в локальном хранилище, потому что вы хотите использовать таймер даже после обновления браузера. Итак, вот что вам нужно сделать:

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} &nbsp; timerHours: {timerHours} &nbsp;
      timerMinutes: {timerMinutes} &nbsp; timerSeconds: {timerSeconds} &nbsp;
    </div>
  );
};

Вот рабочая демонстрация: https: / /codesandbox.io/s/hardcore-sammet-9zj32?file=/src/App.js:84-1823.

1
Taghi Khavari 16 Янв 2021 в 08:52

Используйте 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
Suprit Beck 16 Янв 2021 в 08:13