Как написать таймер на javascript

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

Необходимо реализовать таймер обратного отчета, который бы ставился на то время, которое вносит пользователь в поле для ввода.

function check_2() < var min = parseInt(document.getElementById('mint').value); var sec = min*3; setTimeout('timer()',sec); >function timer()

• Вопрос задан более трёх лет назад
• 3644 просмотра

Комментировать

Решения вопроса 1

Nikita Dergachov @vanillathunder

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Ответы на вопрос 2

Быстрый ответ setInterval — будет выполнять действие раз в какоето время.
Если вам простой таймер — типа пользователь ввел 100 и вам нужно вывести 100->99->98. ->0 FINISH
То просто ставите интервал на 1 секунду — и перерисовываете в нужном месте результат.

Ответ написан более трёх лет назад

Комментировать

Нравится Комментировать

Таймер в JavaScript

JavaScript позволяет создать таймер и выполнять какой-то код через определённое время. Для этого есть специальные функции. В них указывается время, через которое будет выполнен отпределённый код. Функции возвращают идентификатор таймера, через который можно в дальнейшем с ним работать.

Выполнение функции через интервал

Функция setInterval() многократно выполняет какой-то код через определённый интервал.

setInterval (функция, интервал, параметры)

функция — функция, которая должна запускаеться

интервал — интервал в миллисекундах, через который запускается функция

параметры — параметры, которые можно передать функции

Для примера создадим страницу, на которой будет выведено текущее время и будет обновляться каждые две секунды:

10
11
12
13
14
15
16
17
18
19
20

let cur = document.getElementById('cur'); function inform() < let current = new Date(); cur.innerHTML = current.getHours() + ' : ' + current.getMinutes() + ' : ' + current.getSeconds(); >setInterval(inform, 2000);

Обратите внимание, первый запуск функции происходит не сразу, а через интервал.

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

let timer = setInterval(inform, 2000); clearInterval(timer);

Функция setInterval() запускает функцию чётко через указанный интервал. При этом время работы самой функции не учитывается. В нашем примере текущее время будет обновляться каждые две секунды, независимо от того, сколько времени требуется на обновление страницы. Если время исполнения функции получается больше, чем указанный интервал, то некоторые запуски не срабатывают. Но это не приводит к ошибке, следующий запуск будет выполнен.

Выполнение функции с задежкой

Функция setTimeout() позволяет выполнить какой-то код через определённое время.

setTimeout (функция, задержка, параметры)

функция — функция, которая должна запуститься

задержка — время в миллисекундах, через которое запустится функция

параметры — параметры, которые можно передать функции

Добавим на страницу скрипт, который будет выводить на страницу текст через 5 секунд после запуска:

25
26
27
28
29
30
31
32

let text = document.getElementById('text'); function usetext () < text.innerHTML = 'Этот текст появляется через 5 секунд'; >setTimeout(usetext, 5000);

Нужно понимать, что функция setTimeout() не останавлявает работу скрипта. Код, который идёт за ней, продолжает выполняться. А когда пройдёт указанное время, то выполняется функция. Если скрипт выполняется дольше, чем установленная задержка, то функция срабатывает только после выполнения скрипта.

Минимальный интервал, через который срабатывают обе рассмотренные функции, зависит от разных факторов. Самый минимальный, который можно установить — 4 миллисекунды. Меньше устанавливать нет смысла, потому что это самыая большая частота, которая предусмотрена в языке JavaScript. Но если ресурсов процессора не хватает для такой частоты исполнения функций, то интервал увеличивается. Кроме того, если ноутбук работает от батареи, то минимальный интервал значительно увеличивается. Это зависит от устройства и браузера.

Коприрование материалов сайта возможно только с согласия администрации

2017 — 2024 © basecourse.ru Все права защищены

Как задать время отсчета таймера на javascript?

Подскажите пожалуйста, как задать время таймера с помощью кнопки? Таймер написан, время задаю в коде. Есть также три картинки. Необходимо изменять (задавать) время таймера в зависимости от выбора картинки. То есть, если пользователь выбирает первую картинку, то таймер одна минута, вторую — две минуты и т.д.
Сам таймер запускается через отдельную кноку старт. Код таймера:

let timer = 0.1; let amountTime = timer * 60; function calculateTime () < const countdown = document.querySelector("#countdown"); let minutes = Math.floor(amountTime/60); let seconds = amountTime%60; if (seconds < 10)< seconds = "0" + seconds; >if (minutes < 10)< minutes = "0" + minutes; >countdown.textContent = `$:$`; amountTime--; if (amountTime < 0) < stopTimer(); amountTime = 0; >function stopTimer() < clearInterval(); >> const btn = document.querySelector("#btn"); btn.addEventListener('click', startTimer); function startTimer ()

Мне нужно переменную timer задавать через выбор картинки (нажатие кнопки) пользователем. Код кнопок в HTML:

SOFT-BOILED 
MEDIUM-BOILED 
HARD-BOILED 
 

Ставлю addEventListener на все три кнопки — не срабатывает.

Отслеживать

3,830 19 19 серебряных знаков 46 46 бронзовых знаков

Как написать таймер на javascript

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

Функция setTimeout

Для одноразового выполнения действий через промежуток времени предназначена функция setTimeout() . Она может принимать два параметра:

const timerId = setTimeout(someFunction, period)

Параметр period указывает на период в миллисекундах, через который будет выполняться функция из параметра someFunction . А в качестве результата функция возвращает id таймера.

function printMessage() < console.log("Hello METANIT.COM");>setTimeout(printMessage, 5000);

В данном случае через 5 секунд после загрузки страницы произойдет срабатывание функции printMessage .

Для остановки таймера применяется функция clearTimeout() , в которую передается id таймера:

function printMessage() < console.log("Hello METANIT.COM");>const timerId = setTimeout(printMessage, 5000); clearTimeout(timerId);

Функция setInterval

Функции setInterval() и clearInterval() работают аналогично функциям setTimeout() и clearTimeout() с той лишь разницей, что setInterval() постоянно выполняет определенную функцию через промежуток времени.

Например, напишем небольшую программу для вывода текущего времени:

Здесь через каждую секунду (1000 миллисекунд) вызывается функция updateTime() , которая обновляет содержимое поля , устанавливая в качестве его текста текущее вемя.

requestAnimationFrame()

Метод requestAnimationFrame() действует аналогично setInterval() за тем исключением, что он больше заточен под анимации, работу с графикой и имеет ряд оптимизаций, которые улучшают его производительность.

     #rect     

В метод window.requestAnimationFrame() передается функция, которая будет вызываться определенное количество раз (обычно 60) в секунду. В данном случае в этот метод передается функция moveRect, которая изменяет угол поворота блока на странице и затем обращается опять же к методу window.requestAnimationFrame(moveRect) .

В качестве возвращаемого результата метод window.requestAnimationFrame() возвращает уникальный id, который может потом использоваться для остановки анимации:

// получаем id const останавливаем анимацию window.cancelAnimationFrame(id);