Я хотел поделиться с вами простым и интересным способом создания простого таймера с использованием Javascript (ES6) и HTML.
Вот мой файл HTML5:
Здесь у меня есть очень простой счетчик, который начинается с нуля. Я создал тег h1 с идентификатором таймера, чтобы его было легко найти, когда я начну писать свой javascript, а также кнопку, которую я буду использовать, чтобы приостановить свой таймер.
Некрасиво — знаю. Но это сработает, а это сейчас главное! Первое, что мне нужно сделать, это создать функцию с именем timer(). Когда эта функция работает, таймер увеличивается на одну секунду. Когда я нажму кнопку паузы, он остановится на этом номере.
Я решил использовать метод setInterval() в Javascript. Из Документации Mozilla:
Метод setInterval(), предлагаемый в интерфейсах Window и Worker, многократно вызывает функцию или выполняет фрагмент кода с фиксированной задержкой по времени между каждым вызовом.
let ticker = setInterval(function () {
---> code you want it to do goes here <---
}, milliseconds);
Это означает, что мне нужно указать аргумент функции, что мне нужно сделать, и как часто мне нужно будет это делать в миллисекундах. Я хочу, чтобы мой таймер увеличивался на 1 каждую секунду, поэтому я использовал встроенный ++ из JS и аргумент 1000 миллисекунд. УРА! У нас есть рабочий таймер:
Наконец, давайте заставим эту кнопку паузы работать. В моем HTML-коде выбран правильный элемент, поэтому я собираюсь добавить прослушиватель событий в переменную pauseButton. Используя встроенную функцию JS,clearInterval(), я могу останавливать этот таймер каждый раз, когда нажимается кнопка!
Надеюсь, это было полезно для всех начинающих программистов, пишущих ванильный Javascript. Иди и кодируй!
