В этой статье мы рассмотрим несколько вариантов таймеров.
1 вариант.
Простой таймер использующий только минуты и секудны
Чтобы таймер появился, необходимо элементу придать идентификатор timer и добавить условие в тег
Всё, таймер готов.
2 вариант.
Цифрами для таймера будет служить картинка. Также в этом таймере помимо минут и секунд доступны часы и дни. Наш таймер будет отсчитывать время до определенного дня.
Для работы нам понадобится библиотека jquery и файл jquery.countdown.js
Оформляем страницу
Для отображения времени будет использоваться картинка digits2_orange.png
Далее пишем js код
image — наша картинка
startTime — это как раз время оставшееся до 01.09.2017
timerEnd — то, что происходит по завершении работы таймера, в нашем случае в контейнер с идентификатором tut будет вставлена соответствующая надпись
Далее наш таймер
Оформляем
3 вариант.
На наш взгляд самый удобный. Также как и предыдущий показывает оставшееся количество дней, часов, минут, секунд. Не использует изображение для отображения счетчика.
Для работы нам понадобится библиотека jquery и файл jquery.downCount.js
Оформляем страницу
И css для оформления внешнего вида
В этой статье мы расскажем о том, как написать простейший код таймера обратного отсчёта.
Для начала опишем логику работы нашего таймера.
- Вначале определим функцию инициализации таймера, которая будет делать следующее:
- Определяет дату окончания таймера
- Рассчитывает количество часов, минут и секунд до этой даты
- Запускает функцию обратного отсчёт
- Определим функцию, которая будет выводить определенным образом время на страницу
- Определим функцию, с сообщением, которая будет вызываться при истечении времени
Ко всему выше перечисленному так же стоит добавить моменты, когда должны вызываться эти функции. Инициализацию вызываем при загрузке страницы, функция-вывод таймера на страницу при инициализации и при каждом вызове функции отсчета времени.
Создадим документ с js -кодом — timer.js и добавим в него следующий код:
Стоит отметить некоторые моменты, по мимо комментариев.
Например new Date() задаем дату, без параметров — задается текущая дата. А параметры задают конкретную дату, в формате «год, месяц, день, час, минута, секунда», не обязательно указывать параметры справа налево, тогда они будут приняты за 0. Т.е. можно указать только год или год, месяц и день. Месяц задается начиная от 0 (0 — январь), а например 11 — декабрь.
Math.floor() округляет до целого числа.
setInterval() задает повторяющуюся функцию, в нашем случае функцию обратного отсчета. clearInterval() останавливает отсчет таймера.
Наш пример не рассматривает отсчет с днями, но разобравшись в коде вы и сами сможете без проблем добавить дни. Или можно изменить способ отображения.
Доментрацию вы можете посмотреть на демо-странице:
В этой короткой статье, я разбираю небольшой javascript код, с помощью которого можно организовать на вашей странице самый простой таймер обратного отсчета времени в секундах. Скрипт может пригодиться на страницах Вашего сайта, с которых происходит автоматический редирект пользователей на какие-то внешние адреса, при этом будет виден обратный отсчет времени в секундах. Или же на странице где выполняется какая-то другая обработка информации или операция с задержкой времени, и есть потребность отобразить обратный отсчет времени.
Сам скрипт довольно прост:
В первой строке задается начальное значение секунд, от которого идет отсчет до нуля. Далее определяется функция «tiktak», которая с задержкой в одну секунду обращается к самой себе, вычитая из начального значения единицу, и записывая вновь полученное значение во внурь любого блока с , например так:
И так до тех пор, пока значение времени в секундах не станет равно «00» — в этот момент исполнение скрипта останавливается.
Вызывать функцию «tiktak» можно различными способами: можно либо по клику, например так:
Либо же, функцию можно вызвать при загрузке страницы или блока страницы, указав атрибут «onLoad»:
Случай запуска скрипта при загрузке страницы может быть оформлен примерно следующим образом:
Если информация этой статьи будет интересна и полезна Вашему кругу друзей и знакомых, то Вы можете опубликовать ссылку — тогда им проще будет ее найти. Они Вам будут благодарны:).
