Таймер до определенного времени javascript

Code for a simple JavaScript countdown timer?

I want to use a simple countdown timer starting at 30 seconds from when the function is run and ending at 0. No milliseconds. How can it be coded?

13 Answers 13

var count=30; var counter=setInterval(timer, 1000); //1000 will run it every 1 second function timer() < count=count-1; if (count //Do code for showing the number of seconds here > 

To make the code for the timer appear in a paragraph (or anywhere else on the page), just put the line:

where you want the seconds to appear. Then insert the following line in your timer() function, so it looks like this:

function timer() < count=count-1; if (count document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling > 

Thanks for the answer. I am having difficulty using it because my timer appears in a paragraph. How can I put the 30, 29, 28, etc. in the middle of a paragraph?

Click, your timer will only display «0 secs». You should put the innerHTML update after the decrementation, not in the end case.

Hi how can I stop the timer running on page load and instead only when a button is pressed? Also how can I make it reset the timer when a button is pressed after the timer has already ran down?

I wrote this script some time ago:

var myCounter = new Countdown(< seconds:5, // number of seconds to count down onUpdateStatus: function(sec), // callback for each second onCounterEnd: function() < alert('counter ended!');>// final action >); myCounter.start(); 

function Countdown(options) < var timer, instance = this, seconds = options.seconds || 10, updateStatus = options.onUpdateStatus || function () <>, counterEnd = options.onCounterEnd || function () <>; function decrementCounter() < updateStatus(seconds); if (seconds === 0) < counterEnd(); instance.stop(); >seconds--; > this.start = function () < clearInterval(timer); timer = 0; seconds = options.seconds; timer = setInterval(decrementCounter, 1000); >; this.stop = function () < clearInterval(timer); >; > 

I would love to use this instead of the other’s. When I was stuck to restart the starting number, I see this is working nicely..

So far the answers seem to rely on code being run instantly. If you set a timer for 1000ms, it will actually be around 1008 instead.

Here is how you should do it:

function timer(time,update,complete) < var start = new Date().getTime(); var interval = setInterval(function() < var now = time-(new Date().getTime()-start); if( now else update(Math.floor(now/1000)); >,100); // the smaller this number, the more accurate the timer will be > 

timer( 5000, // milliseconds function(timeleft) < // called every step to update the visible countdown document.getElementById('timer').innerHTML = timeleft+" second(s)"; >, function() < // what to do after alert("Timer complete!"); >); 

I gave it a thumbs up, with one caveat — for display purposes you probably want to show the ceiling (Math.ceil()) instead of the floor. It’s really disorienting when the clock reaches 0 a second before the alert fires. (Then of course there needs to be an additional call to update() before complete())

Here is another one if anyone needs one for minutes and seconds:

 var mins = 10; //Set the number of minutes you need var secs = mins * 60; var currentSeconds = 0; var currentMinutes = 0; /* * The following line has been commented out due to a suggestion left in the comments. The line below it has not been tested. * setTimeout('Decrement()',1000); */ setTimeout(Decrement,1000); function Decrement() < currentMinutes = Math.floor(secs / 60); currentSeconds = secs % 60; if(currentSeconds 

You shouldn't pass a string to the first parameter of setTimeout, setTimeout(Decrement, 1000) is preferred. stackoverflow.com/questions/6232574/…

// Javascript Countdown // Version 1.01 6/7/07 (1/20/2000) // by TDavid at http://www.tdscripts.com/ var now = new Date(); var theevent = new Date("Sep 29 2007 00:00:01"); var seconds = (theevent - now) / 1000; var minutes = seconds / 60; var hours = minutes / 60; var days = hours / 24; ID = window.setTimeout("update();", 1000); function update() < now = new Date(); seconds = (theevent - now) / 1000; seconds = Math.round(seconds); minutes = seconds / 60; minutes = Math.round(minutes); hours = minutes / 60; hours = Math.round(hours); days = hours / 24; days = Math.round(days); document.form1.days.value = days; document.form1.hours.value = hours; document.form1.minutes.value = minutes; document.form1.seconds.value = seconds; 1000); >

Countdown To January 31, 2000, at 12:00: 
 
Days Hours Minutes Seconds
 

This script uses very bad practices from the 90's. And also 1.5 hours is not 2 hours. It's 1 hour 30 min. You should use Math.floor , not Math.round

You can use IIFE (Immediately Invoked Function Expression) and recursion to make it a little bit more easier:

var i = 5; //set the countdown (function timer()< if (--i < 0) return; setTimeout(function()< console.log(i + ' secs'); //do stuff here timer(); >, 1000); >)(); 

var i = 5; (function timer()< if (--i < 0) return; setTimeout(function()< document.getElementsByTagName('h1')[0].innerHTML = i + ' secs'; timer(); >, 1000); >)();

Expanding upon the accepted answer, your machine going to sleep, etc. may delay the timer from working. You can get a true time, at the cost of a little processing. This will give a true time left.

For the sake of performances, we can now safely use requestAnimationFrame for fast looping, instead of setInterval/setTimeout.

When using setInterval/setTimeout, if a loop task is taking more time than the interval, the browser will simply extend the interval loop, to continue the full rendering. This is creating issues. After minutes of setInterval/setTimeout overload, this can freeze the tab, the browser or the whole computer.

Internet devices have a wide range of performances, so it's quite impossible to hardcode a fixed interval time in milliseconds!

Using the Date object, to compare the start Date Epoch and the current. This is way faster than everything else, the browser will take care of everything, at a steady 60FPS (1000 / 60 = 16.66ms by frame) -a quarter of an eye blink- and if the task in the loop is requiring more than that, the browser will drop some repaints.

This allow a margin before our eyes are noticing (Human = 24FPS => 1000 / 24 = 41.66ms by frame = fluid animation!)

/* Seconds to (STRING)HH:MM:SS.MS ------------------------*/ /* This time format is compatible with FFMPEG ------------*/ function secToTimer(sec) < const o = new Date(0), p = new Date(sec * 1000) return new Date(p.getTime()-o.getTime()).toString().split(" ")[4] + "." + p.getMilliseconds() >/* Countdown loop ----------------------------------------*/ let job, origin = new Date().getTime() const timer = () => < job = requestAnimationFrame(timer) OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000) >/* Start looping -----------------------------------------*/ requestAnimationFrame(timer) /* Stop looping ------------------------------------------*/ // cancelAnimationFrame(job) /* Reset the start date ----------------------------------*/ // origin = new Date().getTime()

Источник

Таймер обратного отсчёта на чистом JavaScript

В этой статье рассмотрим таймер обратного отсчета, построенный на чистом CSS и JavaScript. Он написан с использованием минимального количества кода без использования jQuery и каких-либо других сторонних библиотек.

Таймеры обратного отсчёта могут использоваться на сайтах для различных целей. Но в большинстве случаев они применяются для отображения времени, которое осталось до наступления какого-то крупного события: запуска нового продукта, рекламной акции, начала распродажи и т.д.

Демо таймера обратного отсчёта

Простой таймер обратного отсчета с днями, часами, минутами и секундами. Очень легко настраивается. Создан на чистом CSS и Javascript (без зависимостей).

Подключение и настройка таймера

1. Вставить в нужное место страницы html-разметку таймера:

Таймер обратного отсчета отображает четыре числа: дни, часы, минуты и секунды. Каждое число находится в элементе . Первый класс ( timer__item ) используется для стилизации элемента, а второй - для таргетинга в JavaScript.

2. Добавить стили (базовое оформление):

.timer__items { display: flex; font-size: 48px; } .timer__item { position: relative; min-width: 60px; margin-left: 10px; margin-right: 10px; padding-bottom: 15px; text-align: center; } .timer__item::before { content: attr(data-title); display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 14px; } .timer__item:not(:last-child)::after { content: ':'; position: absolute; right: -15px; }

Стилизовать таймер обратного отсчета можно так как вы этого хотите.

Вышеприведённый CSS использует flexbox. Знак «:» и текст под каждым компонентом даты выводиться на страницу с помощью псевдоэлементов.

document.addEventListener('DOMContentLoaded', function() { // конечная дата, например 1 июля 2021 const deadline = new Date(2021, 06, 01); // id таймера let timerId = null; // склонение числительных function declensionNum(num, words) { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; } // вычисляем разницу дат и устанавливаем оставшееся времени в качестве содержимого элементов function countdownTimer() { const diff = deadline - new Date(); if (diff 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0; $days.textContent = days < 10 ? '0' + days : days; $hours.textContent = hours < 10 ? '0' + hours : hours; $minutes.textContent = minutes < 10 ? '0' + minutes : minutes; $seconds.textContent = seconds < 10 ? '0' + seconds : seconds; $days.dataset.title = declensionNum(days, ['день', 'дня', 'дней']); $hours.dataset.title = declensionNum(hours, ['час', 'часа', 'часов']); $minutes.dataset.title = declensionNum(minutes, ['минута', 'минуты', 'минут']); $seconds.dataset.title = declensionNum(seconds, ['секунда', 'секунды', 'секунд']); } // получаем элементы, содержащие компоненты даты const $days = document.querySelector('.timer__days'); const $hours = document.querySelector('.timer__hours'); const $minutes = document.querySelector('.timer__minutes'); const $seconds = document.querySelector('.timer__seconds'); // вызываем функцию countdownTimer countdownTimer(); // вызываем функцию countdownTimer каждую секунду timerId = setInterval(countdownTimer, 1000); });

4. Установить дату окончания. Например, до 1 июля 2021:

// конечная дата const deadline = new Date(2021, 06, 01);

Структура кода JavaScript

Основную часть кода занимает функция countdownTimer :

Эта функция выполняет расчёт оставшегося времени и обновляет содержимое элементов .timer__item на странице.

Расчёт оставшегося времени осуществляется посредством вычитания текущей даты из конечной:

// new Date() - текущая дата и время const diff = deadline - new Date();

Вычисление оставшегося количества дней, часов, минут и секунд выполняется следующим образом:

const days = diff > 0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0;

Встроенная функция Math.floor используется для округления числа до ближайшего целого (посредством отбрасывания дробной части).

Вывод оставшегося времени на страницу:

Переменные $days , $hours , $minutes , $seconds содержат элементы (таргеты), в которые выводятся компоненты времени.

Изменение содержимого элементов выполняется через textContent . Если значение меньше 10, то к нему добавляется символ «0».

Получение элементов (выполняется с помощью querySelector ):

// получаем элементы, содержащие компоненты даты const $days = document.querySelector('.timer__days'); const $hours = document.querySelector('.timer__hours'); const $minutes = document.querySelector('.timer__minutes'); const $seconds = document.querySelector('.timer__seconds');

Функция declensionNum используется для склонения числительных:

// склонение числительных function declensionNum(num, words) { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; }

Для постоянного вычисления оставшегося времени и вывода его на страницу используется setInterval .

Хранение идентификатора таймера осуществляется в переменной timerId :

// id таймера let timerId = null;

Использование setInterval для запуска функции countdownTimer каждую секунду:

// вызываем функцию countdownTimer каждую 1 секунду timerId = setInterval(countdownTimer, 1000);

Остановка таймера по истечении времени выполняется в функции countdownTimer :

function countdownTimer() { . if (diff 

// класс для создание таймера обратного отсчета class CountdownTimer { constructor(deadline, cbChange, cbComplete) { this._deadline = deadline; this._cbChange = cbChange; this._cbComplete = cbComplete; this._timerId = null; this._out = { days: '', hours: '', minutes: '', seconds: '', daysTitle: '', hoursTitle: '', minutesTitle: '', secondsTitle: '' }; this._start(); } static declensionNum(num, words) => { return words[(num % 100 > 4 && num % 100 < 20) ? 2 : [2, 0, 1, 1, 1, 2][(num % 10 < 5) ? num % 10 : 5]]; } _start() { this._calc(); this._timerId = setInterval(this._calc.bind(this), 1000); } _calc() { const diff = this._deadline - new Date(); const days = diff >0 ? Math.floor(diff / 1000 / 60 / 60 / 24) : 0; const hours = diff > 0 ? Math.floor(diff / 1000 / 60 / 60) % 24 : 0; const minutes = diff > 0 ? Math.floor(diff / 1000 / 60) % 60 : 0; const seconds = diff > 0 ? Math.floor(diff / 1000) % 60 : 0; this._out.days = days < 10 ? '0' + days : days; this._out.hours = hours < 10 ? '0' + hours : hours; this._out.minutes = minutes < 10 ? '0' + minutes : minutes; this._out.seconds = seconds < 10 ? '0' + seconds : seconds; this._out.daysTitle = CountdownTimer.declensionNum(days, ['день', 'дня', 'дней']); this._out.hoursTitle = CountdownTimer.declensionNum(hours, ['час', 'часа', 'часов']); this._out.minutesTitle = CountdownTimer.declensionNum(minutes, ['минута', 'минуты', 'минут']); this._out.secondsTitle = CountdownTimer.declensionNum(seconds, ['секунда', 'секунды', 'секунд']); this._cbChange ? this._cbChange(this._out) : null; if (diff 

// 1. Получим элементы в которые нужно вывести оставшееся количество дней, часов, минут и секунд const elDays1 = document.querySelector('.timer-1 .timer__days'); const elHours1 = document.querySelector('.timer-1 .timer__hours'); const elMinutes1 = document.querySelector('.timer-1 .timer__minutes'); const elSeconds1 = document.querySelector('.timer-1 .timer__seconds'); // 2. Установим время, например, на одну минуту от текущей даты const deadline1 = new Date(Date.now() + (60 * 1000 + 999)); // 3. Создадим новый объект, используя new CountdownTimer() new CountdownTimer(deadline1, (timer) => { elDays1.textContent = timer.days; elHours1.textContent = timer.hours; elMinutes1.textContent = timer.minutes; elSeconds1.textContent = timer.seconds; elDays1.dataset.title = timer.daysTitle; elHours1.dataset.title = timer.hoursTitle; elMinutes1.dataset.title = timer.minutesTitle; elSeconds1.dataset.title = timer.secondsTitle; }, () => { document.querySelector('.timer-1 .timer__result').textContent = 'Таймер завершился!'; });