В этой статье вы узнаете как сделать простой таймер на js (JavaScript), если вы новичок и давно хотите сделать счётчик времени, то вам однозначно надо посмотреть эту статью.
Также надо сказать, что подобную статью уже ест на нашем сайте, но там мы делали отсчёт времени до определённой даты (Смотреть здесь), тут же мы реализуем простой таймере.
Подготовка:
Для начала подготовим HTML файл в котором у нас будет форма, куда будем вписывать сколько минут надо отсчитать, и кнопка запуска, также блок куда будет выводится сколько осталось времени.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Таймер на JavaScript</title> </head> <body> <input type="text" name="time" id="time"> <button id="button">Запустить</button> <div id="timer"></div> <script src="script.js"></script> </body> </html> |
Объяснять не чего не буду, так как, тут всё должно быть понятно.
Таймер на JavaScript:
Теперь сделаем код таймера на JS, это программа очень простая, думаю вы быстро всё поймёте.
1 2 3 | let timerInput = document.getElementById("time"); // Берём строку let buttonRun = document.getElementById("button");// Берём кнопку запуска let timerShow = document.getElementById("timer"); // Берём блок для показа времени |
Сначала берём строку или форму куда будем вписывать сколько минут надо отсчитать, дальше кнопка для запуска и блок для вывода таймера.
Теперь перейдём к основному коду.
1 2 3 | buttonRun.addEventListener('click', function() { timeMinut = parseInt(timerInput.value) * 60 }) |
Тут мы просто берём при нажатие кнопки данные из формы и преобразуем в числовой тип данных, так как, в форме хранится строчка. Умножаем это значение на 60, потому что нам нужны минуты.
Основной код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | timer = setInterval(function () { seconds = timeMinut%60 // Получаем секунды minutes = timeMinut/60%60 // Получаем минуты hour = timeMinut/60/60%60 // Получаем часы // Условие если время закончилось то... if (timeMinut <= 0) { // Таймер удаляется clearInterval(timer); // Выводит сообщение что время закончилось alert("Время закончилось"); } else { // Иначе // Создаём строку с выводом времени let strTimer = `${Math.trunc(hour)}:${Math.trunc(minuts)}:${seconds}`; // Выводим строку в блок для показа таймера timerShow.innerHTML = strTimer; } --timeMinut; // Уменьшаем таймер }, 1000) |
Давайте разберём этот код, сначала мы запускаем таймер и в нём же получаем сколько секунд, минут и часов осталось.
Потом идёт условие, если переменная которая отвечает за время значение равно или меньше нуля, то программа выключается и выводит сообщение о том, что время закончилось.
Иначе будет создаётся строчка в которую подставляется значение переменных созданных выше, также можете заметить, что используется функция Math.trunc(), оно используется, потому что мы делим число, но при деление может получится число с плавающей точкой, а эта функция её округляет.
Подставляем полученную строку в объект для вывода таймера, на этом всё.
Вывод:
Как видите программа не сложная, мы сделали простой таймер на JavaScript, надеюсь вам понравилась статья.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...