Часы и таймер обратного отсчёта для Joomla

Обычно разработчики шаблонов добавляют дату и год в подвале сайта. Как правило, эти цифры автоматически меняются в зависимости от времени на сервере. Вы наверняка встречали подобное, практически каждый сайт в интернете имеет как минимум одну цифру — действующий год, а где то можно увидеть и дату основания ресурса. Но речь пойдёт не об этом, а о создании часов и таймера для сайта. И подобно дате они будут идти, опираясь не на сервер, а на время вашего компьютера (то есть на посетителя, который открыл страницу). Рано или поздно каждому администратору, по разным причинам, может понадобиться установить такие часы на свой сайт, и мы рассмотрим три варианта на jQuery. Первый вариант на HTML — он будет показывать день недели, дату, месяц, год, а так же время до секунды. Второй — на основе первого внедрим в шаблон для Joomla. А третий — создадим отдельную страницу на сайте для обратного отсчёта до какого-то события. Для дальнейшей работы необходимо иметь версию Joomla 3.2 и выше, я использую 3.6 и стандартный шаблон protostar.

Делаем собственный таймер для спорта

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

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

Как устроен интервальный таймер

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

Читайте так же:

Треугольная планка для крепления счетчика

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

Основа страницы

Возьмём стандартный шаблон страницы:

Теперь поработаем со служебным разделом <head>..</head> и наполним его нужными командами:

Подключаем там же фреймворк jQuery, который упростит нам работу с таймером и его компонентами:

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

Теперь будем размещать внутри этого блока интерфейс программы. Сразу подключим звуковые уведомления, за них отвечает тег <audio>

Звук мы взяли где-то из интернета и положили в ту же папку, что и наша программа.

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

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

Тег <span> — это контейнер, как бы прозрачная обёртка для своего содержимого. С его помощью мы можем отдельно настроить внешний вид и поведение нашего текста. Теперь у нашего заголовка есть внутреннее имя «Secret» и класс «timer_types_btn» , который пока ещё нигде не прописан.

На этом этапе у нас будет пустая страница с надписью «Интервальный таймер». Пока что ничего интересного.

Интерфейс

Интерфейс таймера мы упакуем в собственный блок, чтобы можно было настраивать как общий вид, так и части по отдельности. Его мы вставляем в нашу форму после блока с заголовком:

Читайте так же:

Управление нагрузкой с помощью реле внутри счетчика

Первое, что мы в него добавим — интерфейс настроек тренировки, где можно будет выбрать время и количество повторений. Сначала добавим в него настройку времени на упражнения:

Внутри этого блока у нас три раздела: один отвечает за минуты, второй — за двоеточие, третий — за секунды. Свойство contenteditable=»true» означает, что этот контент можно изменять, щёлкая мышкой и вводя свои значения.

Так же добавим блоки количества подходов и времени отдыха:

Вставляем это всё в нашу панель настроек и смотрим, что получилось:

Табло для отсчёта времени и кнопки

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

Кнопки сделаем с помощью стандартного тега <input> . Каждой кнопке присвоим своё имя и идентификатор, чтобы можно было с ними работать из скрипта:

Вот наш интерфейс. Ставим его в форму на странице и смотрим на результат:

Настраиваем внешний вид

Очевидно, что таймер наш выглядит скромновато. Нужно его оформить. Для этого используем CSS — стили оформления элементов на странице.

Как вы помните, CSS-стили можно выносить в отдельный файл, а можно писать в разделе <head> с помощью тега <script> . Выберем второй способ и определим все стили прямо в этом же документе:

Сохраняем код, обновляем страницу в браузере:

Класс! Время тренировки у нас выделено зелёным цветом, отдыха — красным. Благодаря этому мы не перепутаем числа. А ещё появилось большое табло отсчёта времени и две кнопки вместо трёх — «Пауза» автоматически исчезла после загрузки.

Собираем скрипт

Пока при нажатии на кнопки ничего не происходит — у нас нет скрипта, который бы это обрабатывал. В прошлый раз мы его писали там же, внутри страницы, теперь давайте вынесем его в отдельный файл. Так будет удобнее читать код: команд уже много, и если туда же добавить скрипт, будет совсем большая простыня текста. Поэтому создадим отдельный файл interval_timer_script.js и подключим его на нашей странице с таймером такой командой:

Читайте так же:

Программа canon mp250 сброс счетчика

Смотрите, у нас появилась новая команда в теге скрипта: defer . Она запрещает скрипту выполняться, пока страница полностью не загрузится. Это позволяет нам сначала подготовить страницу целиком, а только потом запускать таймер.

Теперь наполним наш скрипт. Начнём с переменных:

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

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

Ну и добавим эстетики в программу — для красоты будем ставить первым ноль, если число минут или секунд меньше девяти:

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

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

Продолжение скрипта: обрабатываем нажатия на кнопки

Начнём с кнопки «Старт». Логика работы такая: следим за тем, в каком режиме работает таймер, не забывая скрывать «Старт» и показывать «Паузу» после запуска. Как только перешли к отдыху или снова к тренировке — включаем звуковой сигнал. Если все тренировки прошли, но мы снова нажали «Старт», начнём всё сначала:

Теперь очередь кнопки «Пауза». Она появляется в тот момент, когда мы нажимаем на кнопку «Старт», которая сразу исчезает. Логика чуть другая: при каждом нажатии мы просто останавливаем интервал и тоже включаем звук, чтобы обозначить смену режима:

Читайте так же:

Счетчик меркурий условные обозначения

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

Теперь собираем скрипт в один файл, сохраняем, обновляем нашу страницу и нажимаем на «Старт». Всё, успех — таймер начал отсчёт:

Счетчик времени на JavaScript

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

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

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

Код на JavaScript:

В тело документа вставляем HTML код и скрипт для запуска таймера:

Этот пример выводит два таймера, как вы можете наблюдать в соответствующие блоки с заданным ID — counter1 и counter2. Вызов производиться функцией setInterval(«countDown(2)», 1000); с передающимся параметром единичкой или двойкой, который служит для обозначения блока в который будем выводить.

Скрипт можно значительно усовершенствовать используя совместно с JS еще PHP. Данным пример служит лишь для того, чтобы наглядно показать как можно реализовать обратный отсчет у себя на сайте.

Читайте так же:

Счетчики валтек кто производитель

4 комментария to “Счетчик времени на JavaScript”

Скрипт неверно показывает год и часы. Ввожу дату 2013, 7, 1 (1 июля 2013 года), на что он выдает 59 дней и 13 часов. Часы вообще не убывают… Как исправить?

В конечном итоге получилось, что в сутках 28 часов, а не 24. Помогите исправить.

Какие значения вы присваиваете переменным time_diff[1], time_diff[2] ? Есть вероятность что проблема в часовом поясе. Например если вы присваиваете им значения по средствам PHP, на стороннем хостинге, где часовой пояс выставлен в GTM0, от чего смещение на 4 часа. Это как вариант….

Если вы указываете в переменной, следующие значения:
time_diff[1] = (Date.UTC(2013, 7, 1, 0, 0, 0) — D.getTime()) / 1000; /*первый элемент массива*/
А счетчик выдает количество дней, несоответствующее вашим ожиданиям убедитесь на что время, дата в вашей ОС настроено правильно. Функция D.getTime() возвращает время установленное на вашем компьютере, ОС, в миллисекундах.

Оставить комментарий

Друзья, всем привет!

Меня зовут Роман Чернышов, я веб-разработчик и данный блог посвящен моим проектам и бизнесу.

Тут я делюсь личным опытом
и отвечаю на вопросы. Я всегда готов к сотрудничеству с вами, готов реализовать проект любой сложности( опыт 10+ лет ).

Если у вас есть вопросы, предложения, вы хотите совершить покупку моих решений или заказать работу, пишите !

голоса

Рейтинг статьи

Часы и таймер обратного отсчёта для Joomla