Таймер для uCoz
827материалов
228тем на форуме
3004комментария
6157пользователей

Таймер для 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
Материал просмотрен: 2314 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 9 комментариев

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

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


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