Главная Ноутбуки и нетбуки Flash счетчик времени обратный отсчет до даты. Интервальный таймер. Как пользоваться моим онлайн таймером

Flash счетчик времени обратный отсчет до даты. Интервальный таймер. Как пользоваться моим онлайн таймером

Бывает, что вам для чего-то нужен таймер обратного отсчета , в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на javascript в 18 строк кода .

План

Высчитайте оставшееся время

Установите правильную дату окончания

Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:

Var deadline = "2015-12-31";

Короткий формат

Var deadline = "31/12/2015";

Или длинный формат

Var deadline = "December 31 2015";

Каждый из этих форматов позволяет вам установить точное время(в часах, минутах, секундах) и временную зону. Например:

Var deadline = "December 31 2015 23:59:59 GMT+02:00";

Высчитайте оставшееся время

Для начала мы создаем переменную t , чтобы хранить оставшееся время. Date.parse() метод встроен в javascript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.

Var t = Date.parse(endtime) - Date.parse(new Date());

Приведите дату к удобному формату

Теперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:

Var seconds = Math.floor((t/1000) % 60);

Разберемся, что здесь происходит.

Делим миллисекунды на 1000, чтобы перевести их в секунды
Делим общее число секунд на 60 и сохраняем остаток - вам не нужны все секунды, только те, что остались после того, как минуты были подсчитаны
Округлите вниз до ближайшего целого значения, потому что вам нужны полные секунды, а не их фракции

Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.

Выведите данные таймера, как многоразовый объект

Когда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.

Return {
"total": t,
"days": days,
"hours": hours,
"minutes": minutes,
"seconds": seconds
};

Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:

GetTimeRemaining(deadline).minutes

Удобно, правда?

Отобразите часы на странице и остановите их, когда они достигнут нуля

Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:

Затем напишите функцию, которая будет отображать данные внутри нашего div"а :

Function initializeClock(id, endtime){
var clock = document.getElementById(id);
var timeinterval = setInterval(function(){

" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;

}
},1000);
}

Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM .

Высчитывать оставшееся время
Выводить оставшееся время в наш div
Если оставшееся время = 0, останавливать часы

Единственное, что осталось, запустить часы следующим образом:

InitializeClock("clockdiv", deadline);

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк javascript кода .

Подготовьте ваши часы для отображения

До стилизации нам будет нужно немного усовершенствовать некоторые вещи.

Убрать начальную задержку, чтобы таймер показывался незамедлительно
Сделать скрипт часов более эффективным, чтобы не приходилось непрерывно перестраивать все часы
Добавить нули по желанию

Убираем начальную задержку

В часах мы используем setInterval , чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.

Чтобы это сделать, давайте переместим анонимную функцию, которую мы передаем в setInterval (ту, которая обновляет часы каждую секунду) в собственную отдельную функцию, которую назовем updateClock . Вызовите эту функцию однажды вне setInterval и затем вызовите ее снова внутри setInterval . Таким образом, часы будут показываться без задержки.

В вашем javascript замените это:

Var timeinterval = setInterval(function(){ ... },1000);

Function updateClock(){
var t = getTimeRemaining(endtime);
clock.innerHTML = "days: " + t.days + "
" +
"hours: "+ t.hours + "
" +
"minutes: " + t.minutes + "
" +
"seconds: " + t.seconds;
if(t.total clearInterval(timeinterval);
}
}

UpdateClock(); // запустите функцию один раз, чтобы избежать задержки
var timeinterval = setInterval(updateClock,1000);

Делаем скрипт более эффективным

Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.

Вот html :

Days:

Hours:

Minutes:

Seconds:

Var daysSpan = clock.querySelector(".days");
var hoursSpan = clock.querySelector(".hours");
var minutesSpan = clock.querySelector(".minutes");
var secondsSpan = clock.querySelector(".seconds");

Function updateClock(){
var t = getTimeRemaining(endtime);

DaysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;

...
}

Добавляем ведущие нули

Если вам нужны ведующие нули, вы можете заменить код такого вида:

SecondsSpan.innerHTML = t.seconds;

На такой:

SecondsSpan.innerHTML = ("0" + t.seconds).slice(-2);

Заключение

Мы рассмотрели, как сделать простой таймер обратного отсчета на javascript . Все, что вам осталось, это добавить стили. Спасибо за внимание!

Хотя таймер определяется как тип часов, используемый для измерения интервала времени, обычно он используется как счётчик, который ведёт отсчёт заданного времени. Как правило, таймеры – это устройства со звуковыми сигналами, которые раздаются по окончании указанного времени.

Когда был изобретён таймер?

Первым в истории инструментом для измерения времени были водяные часы. Люди использовали их, начиная с 16 века до н.э. Следующим инструментом стали песочные часы, которые, согласно некоторым источникам, были изобретены франкийским монахом в 8 веке; однако они не использовались активно вплоть до 14 века. Что касается, кухонного таймера, ставшего первым механическим таймером и используемого по сей день, то он был изобретён Томасом Норманом Хиксом в 1926 году.

Как использовать таймер?

Чтобы воспользоваться механическим таймером (например, кухонным), поверните его счётчик по часовой стрелке в направлении времени, с которого таймер будет отсчитывать время. Что касается цифрового таймера, то вам нужно задать период времени, выбрав необходимое количество часов, минут и секунд, а затем нажать кнопку «Старт».

Где можно использовать таймер?

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

В чём разница между таймером и секундомером?

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

Где на компьютере находится таймер?

Во многих операционных системах таймер не является одним из стандартных приложений. Что касается компьютеров на Windows или Mac, то здесь лучше скачать таймер из магазина приложений. Если пользователи не хотят устанавливать какие-либо дополнительные программы, то они могут воспользоваться онлайн таймером.

Что такое онлайн таймер?

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

Как использовать онлайн таймер?

Чтобы воспользоваться онлайн таймером, вы должны сначала задать период времени, выбрав требуемое количество часов, минут и секунд. Потом выберите мелодию для будильник , который зазвучит, когда закончится время таймера, а затем нажмите кнопку «Запустить отсчёт времени», чтобы запустить таймер.

Здравствуйте дорогие друзья. В одной из прошлых статей я рассуждал о том, стоит ли использовать (его еще называют таймером обратного отсчета) на своем лендинг пейдж. Так вот, если вы считаете, что он вам необходим, то сегодня я расскажу вам о том, как его подключить на свой лендинг.

Речь пойдет о нескольких вариантах, в одном случае – это будет скрипт счетчика обратного отсчета, который будет зациклен на каждые 24 часа. То есть, вы сможете делать акцию. Например: “до конца дня — ” и таймер будет показывать, сколько времени осталось до конца дня. По истечению суток, таймер перезапустится и снова начнет отсчет

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

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

Счётчик обратного отсчёта времени с перезапуском

Итак, счетчик обратного отсчета времени, который будет перезапускаться по истечении суток. Разработал его один умелец у которого блог mywpnote.ru. Наткнулся на блог около полугода назад, и он очень выручил меня в то время. Сегодня же хочу рассказать вам об одном из счетчиков, которые он разработал и описать, как его подключать.

Внешний вид таймеров такой:

Скачивайте исходники и в архиве вы увидите 4 папки с названиями vid1, vid2, vid3, vid4 – в них разные типы оформления таймеров. Вы можете посмотреть все и выбрать понравившийся. Способ подключения у всех одинаковый.

Я буду показывать на 4, так как он, как мне кажется, наиболее универсален. Открываем vid4 и пред нами стандартный набор папок для большинства исходников в сети. (индексный файл, папка с таблицами стилей, папка с картинками, и папка со скриптом). Я немного изменил структуру файлов — для того, чтобы новичкам было проще подключать счетчик. То есть я вынес скрипт таймера в отдельный файл, а раньше он был в индексном.

Как подключить скрипт счетчика обратного отсчета на свою landing page?

Открываем index.html– любым редактором (я пользуюсь sublime3) и видим следующий код.

Отсюда нужно скопировать в свой проект подключение таблицы стилей и скрипта (7 и 8 строка).

А также, в месте, на котором вы хотели бы разместить таймер, необходимо прописать тег div с классом “countbox” – 13 строка. В коде специально размещено несколько подключений таймеров, чтобы дать понять, что их можно использовать несколько раз на странице. У многих скриптов с этим проблемы, и второй раз они не хотят выводиться на экране.

Теперь необходимо просто скопировать папки img, css и js, а также их содержимое в свой проект — и все! Счетчик обратного отсчета будет работать! Как видите, это занимает максимум 5 минут, и такой важный элемент будет присутствовать у вас на сайте. Если возникнут вопросы — пишите в комментариях, я обязательно помогу подключить счетчик!

Счетчик обратного отсчета онлайн

Для тех, кому необходим другой тип счетчика обратного отсчета, о котором говорилось в начале статьи, существует сервис с простым до безобразия способом подключения. Все что вам нужно сделать — это зайти на сайт www.timegenerator.ru и выбрать один из предложенных таймеров.

Самый простой и удобный таймер обратного отсчета

HTML

Countdown Clock

Days

Hours

Minutes

Seconds

CSS

body { text-align: center; background: #00ecb9; font-family: sans-serif; font-weight: 100; } .countdown-title { color: #396; font-weight: 100; font-size: 40px; margin: 40px 0px 20px; } .countdown { font-family: sans-serif; color: #fff; display: inline-block; font-weight: 100; text-align: center; font-size: 30px; } .countdown-number { padding: 10px; border-radius: 3px; background: #00bf96; display: inline-block; } .countdown-time { padding: 15px; border-radius: 3px; background: #00816a; display: inline-block; } .countdown-text { display: block; padding-top: 5px; font-size: 16px; }

Javascript

Указываем дату окончания работы таймера

Формат вывода даты ISO 8601:

Var deadline = "2015-12-31";

Сокращенный формат:

Var deadline = "31/12/2015";

Длинный формат:

Var deadline = "December 31 2015";

Вывод даты с точным временем и часовым поясом:

Var deadline="January 01 2018 00:00:00 GMT+0300";

Вывод таймера для лендингов – таймер все время будет выводить, что осталось 15 дней (можно указать любое время)

Var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);

Рабочий пример Таймера обратного отсчета

Скрываем таймер после окончания времени и выводим сообщение, что время истекло

Данное решение предложил в комментариях Игорь.

Добавляем в HTML блок с сообщением

Time is up!

Добавляем такие стили в CSS:

Deadline-message{ display: none; font-size: 24px; font-style: italic; } .visible{ display: block; } .hidden{ display: none; }

В скрипте меняем функцию инициализации таймера function initializeClock(id, endtime) {...} , остальное оставляем так же, как было:

Function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); function updateClock() { var t = getTimeRemaining(endtime); if (t.total <= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-message").className = "visible"; clearInterval(timeinterval); return true; } daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); } updateClock(); var timeinterval = setInterval(updateClock, 1000); }

В данной функции изменилось то, что при истечении времени таймера, на сам таймер добавляется класс.hidden (скрывает таймер), а на сообщение об окончании времени вешается класс.visible (отображает сообщение), а так же прекращаем выполнение функции вызовом метода clearInterval(timeinterval); . А вывод единиц времени помещен после проверки истекло время или нет.

Рабочий пример Таймера обратного отсчета с выводом сообщения об истечении времени

Нажмите кнопку Rerun , чтобы убедиться, что все работает как надо.

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

Суть таймера в том, что при окончании времени таймер не останавливается, не выводится никакое сообщение, а просто начинается новый отсчет:

Таймер установлен на 5 секунд и при окончании времени будет перезапущен еще на 5 секунд

Function getTimeRemaining(endtime) { var t = Date.parse(endtime) - Date.parse(new Date()); var seconds = Math.floor((t / 1000) % 60); var minutes = Math.floor((t / 1000 / 60) % 60); var hours = Math.floor((t / (1000 * 60 * 60)) % 24); var days = Math.floor(t / (1000 * 60 * 60 * 24)); return { total: t, days: days, hours: hours, minutes: minutes, seconds: seconds }; } function initializeClock(id, endtime) { var clock = document.getElementById(id); var daysSpan = clock.querySelector(".days"); var hoursSpan = clock.querySelector(".hours"); var minutesSpan = clock.querySelector(".minutes"); var secondsSpan = clock.querySelector(".seconds"); function updateClock() { var t = getTimeRemaining(endtime); if (t.total <= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); } daysSpan.innerHTML = t.days; hoursSpan.innerHTML = ("0" + t.hours).slice(-2); minutesSpan.innerHTML = ("0" + t.minutes).slice(-2); secondsSpan.innerHTML = ("0" + t.seconds).slice(-2); } updateClock(); var timeinterval = setInterval(updateClock, 1000); } var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline);

Разница в JS-коде между вариантом с выводом сообщения об окончании времени только в замене этого кода

If (t.total <= 0) { document.getElementById("countdown").className = "hidden"; document.getElementById("deadline-messadge").className = "visible"; clearInterval(timeinterval); return true; }

If (t.total <= 0) { clearInterval(timeinterval); var deadline = new Date(Date.parse(new Date()) + 5 * 1000); initializeClock("countdown", deadline); }

Обратите внимание, что при обнулении таймера нам нужно задать новый дедлайн, и он может быть совсем другим, чем первоначальный, который указан на предпоследней строке кода:

Var deadline = new Date(Date.parse(new Date()) + 5 * 1000);

Часто нужно установить таймер на какое-то фиксированное время. Например, вы занимаетесь спортом, и вам нужно поставить таймер на пять минут для тренировок. Или же вы варите яйца вкрутую, и вам нужно засечь десять минут. Для решения этой проблемы используйте наш таймер. Используйте наш онлайн секундомер со звуком для отсчета 1 минуты на тренировках, для бытовых нужд, любых других целей. Можете сразу пользоваться им, или же перейти ниже по странице, где есть инструкция, как им пользоваться.

30 секунд 1 минута 2 минуты 3 минуты

5 минут 10 минут 15 минут 30 минут

Часы 0 — +

Минуты 0 — +

Секунды 30 — +

Звук:

Сброс Старт

Инструкция по использованию

Вы можете выставить фиксированное время, например:

таймер на 10 минут;
таймер на 1 минуту;
таймер на 2 минуты;

Список также включает варианты на 15 минут, 20 минут, на 3 минуты.

Для выставления этого времени воспользуйтесь кнопками, на которых написано это время. Например, чтобы поставить таймер на тридцать минут, нажмите на кнопку, где написано «30 минут». После этого нажмите кнопку «Старт». Если же вам нужно другое время, просто выставьте его, нажимая кнопки «+» и «-» возле соответствующих полей (часы, минуты и секунды). Выставить можно любое время — это может быть как одна-две минуты, или же отрезок длиной всего в одну секунду.

В конце отсчета вы услышите звук. Вы можете отключить его, нажав на соответствующий переключатель. Кнопка «Сброс» обнуляет все поля.

Мы сделали максимально удобный таймер, который вы можете поставить на 5, 20 минут, на любое другое время. Если у вас есть предложения по улучшению — пишите, и мы учтем их.

Секундомер онлайн