Введение

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

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


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

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

Эта команда создаст новый проект реакции с некоторыми примерами файлов, чтобы вы могли начать работу, где Таймер обратного отсчета будет названием вашего проекта.

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 года или позже. Вы должны знать почему. Это потому, что «18.10.2022» является нашей конечной датой. Не стесняйтесь изменить дату окончания на более позднюю дату после сегодняшнего дня и увидеть волшебство.

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

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

Я хотел бы связаться с вами на Твиттер для более захватывающего контента

Удачного кодирования…