регистрация
856материалов
3289комментариев
235тем на форуме
6857пользователей

Таймер для uCoz


Описание:

Подробное руководство для создания таймера на JavaScipt. Даже начинающие веб-разработчики смогут разобраться в технологии реализации функций даты\время. Зная основы, вы с легкостью сможете делать свои собственные часы\таймеры\будильники, оформляя их как захочется. Сам скрипт выполнен в зелено-березовых тонах, полностью адаптивен под любые мобильные устройства. Таймер не будет нагружать Ваш сайт, так как код очень легкий и короткий. Установка очень проста и не займет много времени.

Установка:

В верхнюю часть сайта вставляем код:
Код
<style>
#clockdiv{
       font-family: sans-serif;
       color: #fff;
       display: inline-block;
       font-weight: 100;
       text-align: center;
       font-size: 30px;
}

#clockdiv > div{
       padding: 10px;
       border-radius: 3px;
       background: #00BF96;
       display: inline-block;
}

#clockdiv div > span{
       padding: 15px;
       border-radius: 3px;
       background: #00816A;
       display: inline-block;
}

.smalltext{
       padding-top: 5px;
       font-size: 16px;
}
       </style>

<script>
window.console = window.console || function(t) {};
</script>

В нижнюю часть сайта:
Код
<script>
            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);

          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);

          if(t.total<=0){
            clearInterval(timeinterval);
          }
        }

        updateClock();
        var timeinterval = setInterval(updateClock,1000);
}

var deadline = 'December 31 2015 00:00:50';
initializeClock('clockdiv', deadline);
          </script>

Код отсчёта:
Код
<div id="clockdiv">
        <div>
          <span class="days"></span>
          <div class="smalltext">Дни</div>
        </div>
        <div>
          <span class="hours"></span>
          <div class="smalltext">Часы</div>
        </div>
        <div>
          <span class="minutes"></span>
          <div class="smalltext">Минуты</div>
        </div>
        <div>
          <span class="seconds"></span>
          <div class="smalltext">Секунды</div>
        </div>
</div>

Настройка отсчёта:

Находим код:
Код
var deadline = 'December 31 2015 00:00:50';
  • December - месяц
  • 31 - день
  • 2015 - год
  • 00 - часы
  • 00 - минуты
  • 50 - секунды


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 12.10.2015 в 02:00
Материал просмотрен: 2781 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 9 комментариев

Пожаловаться
Сказать спасибо

9 комментариев


Валера
Не плохо, не плохо. Спасибо
r
Rutina @rutina 12.10.2015 02:432
+5
Мне тоже понравилась простота таймера и легкое редактирование. От меня + автору.
cityloveznakomstva
Спасибо за таймер
obmeninout
Hunter 777 @obmeninout 21.06.2016 14:264
0
Подскажите как сделать что бы в конце когда ноль появлялось сообщение "Поздравляю"
Ромчик
Это обычный таймер, без уведомлений
obmeninout
Hunter 777 @obmeninout 21.06.2016 15:045
0
и что добавить что бы таймер останавливался после нулевой отметки?
T
Что-то не так я наверно крутанул... Он у меня стоит на месте, не идёт.
Ромчик
Ссылку на сайт дайте
1 2 »
avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0