Как сделать таймер на JavaScript

как сделать таймер в javascript js
Метки: /

В этой статье вы узнаете как сделать простой таймер на js (JavaScript), если вы новичок и давно хотите сделать счётчик времени, то вам однозначно надо посмотреть эту статью.

Также надо сказать, что подобную статью уже ест на нашем сайте, но там мы делали отсчёт времени до определённой даты (Смотреть здесь), тут же мы реализуем простой таймере.

Подготовка:

Для начала подготовим HTML файл в котором у нас будет форма, куда будем вписывать сколько минут надо отсчитать, и кнопка запуска, также блок куда будет выводится сколько осталось времени.

Объяснять не чего не буду, так как, тут всё должно быть понятно.

Таймер на JavaScript:

Теперь сделаем код таймера на JS, это программа очень простая, думаю вы быстро всё поймёте.

Сначала берём строку или форму куда будем вписывать сколько минут надо отсчитать, дальше кнопка для запуска и блок для вывода таймера.

Теперь перейдём к основному коду.

Тут мы просто берём при нажатие кнопки данные из формы и преобразуем в числовой тип данных, так как, в форме хранится строчка. Умножаем это значение на 60, потому что нам нужны минуты.

Основной код.

Давайте разберём этот код, сначала мы запускаем таймер и в нём же получаем сколько секунд, минут и часов осталось.

Потом идёт условие, если переменная которая отвечает за время значение равно или меньше нуля, то программа выключается и выводит сообщение о том, что время закончилось.

Иначе будет создаётся строчка в которую подставляется значение переменных созданных выше, также можете заметить, что используется функция Math.trunc(), оно используется, потому что мы делим число, но при деление может получится число с плавающей точкой, а эта функция её округляет.

Подставляем полученную строку в объект для вывода таймера, на этом всё.

простой таймер на javascript

Вывод:

Как видите программа не сложная, мы сделали простой таймер на JavaScript, надеюсь вам понравилась статья.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Количество оценивших: 1
Средняя оценка: 5,00
Загрузка...

Поделится:

Также рекомендую: