Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Страница заглушки сайта с обратным отсчетом

Дата добавления: 17.10.2019 - 10:50
Добавил: Buger
Количество просмотров: 65
Количество комментариев: 0
Размер файла: 5.7 Kb
Рейтинг материала: 4.0 / 1
Страница заглушки сайта с обратным отсчетом
БЕСПЛАТНО
рейтинг 4.0
/
голосов 1
Страница "Заглушки для сайта" с обратным отсчетом с определенной даты при помощи плагина jQuery Loopcounter.

jQuery Loopcounter - это крошечный и простой в использовании плагин таймера обратного отсчета, который отображает оставшиеся дни / часы / минуты / секунды до определенной даты.

Отлично подходит для страниц заглушки для сайта, целевых страниц, скоро появившихся страниц, страниц с рекламными акциями и многого другого.

Как использовать:
1. Создайте слоты дней, часов, минут и секунд для таймера обратного отсчета и укажите дату, с которой вы хотите вести обратный отсчет, в атрибуте data-date.
Код
<div class="counter-class" data-date="2022-12-24 23:59:59"><!-- Формат ввода даты гггг-мм-дд чч:мм:сс -->
  <div><span class="counter-days"></span> Дней</div>
  <div><span class="counter-hours"></span> Часов</div>
  <div><span class="counter-minutes"></span> Минут</div>
  <div><span class="counter-seconds"></span> Секунд</div>
</div>

2. Подключите скрипт плагина Loopcounter после jQuery.
Код
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script>
  jQuery(document).ready(function($){
  window.loopcounter = function( idWarp ) {
  if(typeof idWarp!= 'undefined'){
  var date = $('.'+idWarp).data('date');
   
  var start = new Date( date ),
  end = new Date(),
  diff = new Date( start - end ),
  time = diff/1000/60/60/24;
   
  var day = parseInt(time);
  var hour = parseInt( 24 - (diff/1000/60/60)%24 );
  var min = parseInt( 60 - (diff/1000/60)%60 );
  var sec = parseInt( 60 - (diff/1000)%60 );

  counterDate(idWarp,day,hour,min,sec);

  var interval = setInterval(function () {
  if( sec==0 && min!=0 ){
  min--;
  sec = 60;
  }
  if(min == 0 && sec == 0 && hour!=0 ){
  hour--;
  min = 59;
  sec = 60;
  }
  if(min == 0 && sec == 0 && hour == 0 && day!=0 ){
  day--;
  hour = 23;
  min = 59;
  sec = 60;
  }
  if(min == 0 && sec == 0 && hour == 0 && day==0 ){
  clearInterval(interval);
  }else{
  sec--;
  }
  counterDate(idWarp,day,hour,min,sec);
  }, 1000 );

  function counterDate(id,day,hour,min,sec){
  if (time < 0) { day = hour = min = sec = 0; }
  $( '.'+id+' .counter-days').html( counterDoubleDigit(day) );
  $( '.'+id+' .counter-hours').html( counterDoubleDigit(hour) );
  $( '.'+id+' .counter-minutes').html( counterDoubleDigit(min) );
  $( '.'+id+' .counter-seconds').html( counterDoubleDigit(sec) );
  }
  function counterDoubleDigit( arg ){
  if( arg.toString().length <= 1 ){
  arg = ('0' + arg).slice(-2);
  }
  return arg;
  }
  }
  }
  //loopcounter( 'counter-id' );
  });
</script>

3. Инициализируйте таймер обратного отсчета.
Код
<script type="text/javascript">
  $(document).ready(function(){
  loopcounter('counter-class');
  });
</script>

4. Плагин также поддерживает одновременно несколько экземпляров.
Код
$(function(){
  loopcounter('myCountdown');
  loopcounter('myCountdown2');
  loopcounter('myCountdown3');
  ...
});

5. Стиль таймера обратного отсчета с использованием ваших собственных стилей CSS.
Код
.counter-days {
  /* здесь код стилей */
}

.counter-hours {
  /* здесь код стилей */
}

.counter-minutes {
  /* здесь код стилей */
}

.counter-seconds {
  /* здесь код стилей */
}

На этом всё!
Не забывайте смотреть демонстрационную страницу, если вдруг появятся какие-либо ошибки.
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: