1 2 3

Вы здесь

Drupal 7 - Простой javascript таймер обратного отсчета

Аватар пользователя Gorecmagic

2 Комментарии

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

На прошлом уроке мы научились подключать файл скрипта к Drupal 7. В этом уроке давайте подключим к друпал в качестве примера мечту моего детства - очень простой JS таймер обратного отсчета. Не знаю почему, но это до сих пор вызывает у меня восторг. Подключения библиотеки здесь нет, таймер полностью написан в файле js, что исключит некоторые конфликты библиотек на сайте. Давайте посмотрим пример кода таймера:

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

В следующем уроке давайте подключим более гибкий и крутой таймер с подробным описанием. Читать далее...

2 Комментарии

Добрый день посмотрел на Ваш таймер обратного отсчёта очень понравился. Можно ли сделать немного проще допустим нажал на старт и пошёл отсчёт времени в часах минутах и секундах? С возможностью устанавливать время самому. Я сделал похожий. Первый раз запускаешь время отсчитывает нормально. Второй раз нажимаешь что-то не так. <button onclick = "startTimer()">Старт</button> <span id="mT">00:00:10</span> <script> function startTimer () { t = setInterval (function() { var s = document.getElementById ('mT'), f = function (x) { return (x / 100).toFixed (2).substr (2); }, d = ':', y = s.innerHTML.split (d), z = --y [2] + y [0] * 3.6e3 + y [1] * 60; if (!z) clearInterval (t); s.innerHTML = [ f (Math.floor (z / 3600)), f (Math.floor (z % 3600 / 60)), f (z % 3600 % 60) ].join (d); }, 1000); } </script>
Аватар пользователя Gorecmagic

Сергей, я не программист, любитель. =)  С вопросами по написанию таймеров я вам не помогу. Сейчас в сети есть материала более чем достаточно, можно найти все что угодно, в большинстве случаев. Особенно если копать на американский сайтах. Таймеры не мои, это все найденные мной примеры из сети. По сути к вашим требованиям подходит статья со следующим таймером указанным в статье по ссылке. У него "море" настроек если не все. Там остается только под шаманить со стилями, и все. Можно придать ему совершенно любую форму, вид и функционал.