Создайте простое и красивое приложение с таймером обратного отсчета
Крупнейшая распродажа года, известная как Распродажа Черной пятницы, только что закончилась, и вы могли получить сотни писем с таймером обратного отсчета для покупки любого курса на udemy, Pluralsight и т. Д. Или покупки любой подписки на ограниченный временной период.
В этой статье мы фактически создадим настоящее приложение таймера обратного отсчета, как показано на основном изображении выше.
Итак, приступим!
- Создайте новое приложение React, используя
create-react-app countdown_timer
Если у вас не установлен create-react-app
, установите его с помощью
npm install create-react-app -g
2. Теперь откройте каталог countdown_timer
в вашей любимой среде IDE, например в Visual Studio Code.
3. Удалите все файлы из папки src
, кроме index.js
.
4. Добавьте следующее содержание в index.js
5. Мы будем использовать react-bootstrap
для базовой стилизации CSS. Мы также будем писать наш собственный CSS.
6. Перейдите в каталог countdown_timer
из терминала и установите пакеты.
npm install [email protected] [email protected]
7. Обратите внимание, что react-bootstrap
также требуется bootstrap
для базового CSS, поэтому мы добавили и его
8. Теперь ваш package.json
будет иметь раздел зависимостей, как показано ниже.
9. Для выбора даты и времени воспользуемся библиотекой react-datetime-picker
. Он очень прост в использовании и к тому же очень мощный. Вы можете установить все поля даты и времени, просто используя клавиши со стрелками на клавиатуре при выборе даты.
Вы можете найти все доступные параметры и документацию по нему на https://www.npmjs.com/package/react-datetime-picker
10. Чтобы установить пакет react-datetime-picker
npm install [email protected]
11. Создайте два новых файла в src
папке с именами Timer.js
и styles.css
.
12. Добавьте следующее содержание в styles.css
13. Добавьте следующее содержание в Timer.js
14. Теперь запустите приложение, выполнив команду npm start
с терминала.
15. Давайте разберемся, что происходит в Timer.js
- В метод
render
мы добавили форму для выбора конечной даты и кнопку для запуска таймера - Ниже мы отображаем секцию таймера обратного отсчета.
- Когда мы нажимаем кнопку
“Begin Countdown”
, мы вызываем функциюcalculateCountdown
, которая берет текущую дату и время и дату окончания и определяет разницу между двумя датами.
- Внутри метода
calculateCountdown
для методаsetState
мы обновляем дни, часы, минуты и секунды с помощью вычисленных значений, и после обновления состояния мы снова вызываем функциюcalculateCountdown
после задержки в 1 секунду (1000 мс), используяsetTimeout
- Всегда рекомендуется удалять все добавленные обработчики событий и очищать тайм-аут или интервал в компоненте после размонтирования компонента, что мы делаем в
componentWillUnmount
методе.
И вот так! Мы создали простое и красивое приложение с таймером обратного отсчета.
Исходный код Github: https://github.com/myogeshchavan97/countdown_timer
Живая демонстрация: https://codesandbox.io/s/hopeful-sea-2l3ls
На сегодня все. Надеюсь, вы многому научились при создании этого приложения.
Не забудьте подписаться, чтобы получать мою еженедельную рассылку с замечательными советами, приемами и статьями прямо в свой почтовый ящик здесь.