Как создать таймер обратного отсчета в ReactJS


Введение

В предыдущей статье я рассказал о том, как создать таймер обратного отсчета с помощью JavaScript. В этой статье содержалась дополнительная информация о том, как работает таймер обратного отсчета, его важность, а также были описаны некоторые случаи использования, когда вам может понадобиться таймер обратного отсчета. Я также объяснил, как работают методы JavaScript setInterval() и clearInterval(). Я рекомендую проверить это.

В этой статье я объясню, как реализовать обратный отсчет времени в ReactJS.

Создайте новый проект React

Начать работу с React очень просто. Чтобы создать новый проект React, выполните в терминале следующую команду.

Эта команда создаст новый проект react с некоторыми примерами файлов для начала работы, где count-down-timer будет названием вашего проекта.

npx create-react-app count-down-timer
Войти в полноэкранный режим Выйти из полноэкранного режима

Создав проект, откройте файл /App.js и вставьте приведенный ниже код.

import './App.css';
import {useState, useEffect} from 'react';

function App() {
  const countdownDate = new Date('10/18/2022');
  //end date
  const [state, setState] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });
//state variable to store days, hours, minutes and seconds

  useEffect(() => {
    const interval = setInterval(() => setNewTime(), 1000);
    //indicating function to rerun every 1000 milliseconds (1 second)

    if(state.seconds < 0){
      clearInterval(interval)
    //Stop the rerun once state.seconds is less than zero
    }
  }, []);

  const setNewTime = () => {
    if (countdownDate) {
      const currentTime = new Date();
      //get current time now in milliseconds
      const distanceToDate = countdownDate - currentTime;
      //get difference dates in milliseconds
      let days = Math.floor(distanceToDate / (1000 * 60 * 60 * 24));
      // get number of days from the difference in dates
      let hours = Math.floor(
        (distanceToDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
      );
      // get number of minutes from the remaining time after removing hours
      let minutes = Math.floor(
        (distanceToDate % (1000 * 60 * 60)) / (1000 * 60),
      );
      let seconds = Math.floor((distanceToDate % (1000 * 60)) / 1000);
      // number of hours from the remaining time after removing seconds

      const numbersToAddZeroTo = [1, 2, 3, 4, 5, 6, 7, 8, 9];

      days = `${days}`;
      if (numbersToAddZeroTo.includes(hours)) {
        hours = `0${hours}`;
      } else if (numbersToAddZeroTo.includes(minutes)) {
        minutes = `0${minutes}`;
      } else if (numbersToAddZeroTo.includes(seconds)) {
        seconds = `0${seconds}`;
      }
      // a logic to add 0 in front of numbers such that 1 will be 01, 2 will be 02, and so on.

      setState({ days, hours, minutes, seconds });
      //Updating the state variable.
    }
  };

  return (
    <div className="container">
        {
            state.seconds < 0 ?
            <div className='counter-timer'> Time up </div>
            :
            <div className='counter-container'>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.days || '00'}</div>
              <span >Days</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.hours || '00'}</div>
              <span >Hours</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.minutes || '00'}</div>
              <span >Minutes</span>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>:</div>
            </div>
            <div className='counter-timer-wrapper'>
              <div className='counter-timer'>{state.seconds || '00'}</div>
              <span >Seconds</span>
            </div>
          </div>
        }

    </div>

  );
}

export default App;

Вход в полноэкранный режим Выход из полноэкранного режима

Откройте файл /App.css и вставьте приведенный ниже код.


body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
  }
  div{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  #time-up{
    display: none;
  }
  .container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  height: 100vh;
  background-color: #1A1A40;
  color: white;
  }
  .counter-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  }
  .counter-timer-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: fl; */
  }
  .counter-timer{
    font-size: 60px;
    font-weight: 600;
    margin: 0;
    padding: 0;
  }
  span{
        color: #c7c7c7;
        font-size: 18px;
  }

  @media screen and (max-width : 900px) {
    .counter-timer {
      font-size: 30px;
      font-weight: 600;
    }
    span {
        font-size: 12px;
    }

  }
Вход в полноэкранный режим Выйти из полноэкранного режима

Вот и все. У вас есть супер классный таймер обратного отсчета.

Примечание: Таймер обратного отсчета будет отображаться, если вы читаете эту статью 18 октября 2022 года или позже. Вы должны знать почему. Это потому, что «10/18/2022» — наша конечная дата. Не стесняйтесь изменить дату окончания на более позднюю дату после сегодняшнего дня и увидеть волшебство.

Спасибо за чтение 🎉🎉🎉🎉

Если у вас есть вопросы, пожалуйста, задавайте их в разделе комментариев.

Я буду рад пообщаться с вами в Twitter для получения более интересного контента.

Счастливого кодинга…

Оцените статью
devanswers.ru
Добавить комментарий