ZorNet.Ru — сайт для вебмастера » JavaScript и jQuery » Заглушка с таймером обратного отсчёта

Заглушка с таймером обратного отсчёта

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

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

Полная страницу под установку:

Код

<html><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>jQuery Loopcounter Countdown Examples</title>
  <style type="text/css">
  body{
  margin: 0;
  padding: 0;
  background: url('http://zornet.ru/CSS-ZORNET/Kodak_saita/Asvaged/dekulased/reWalls.com-71425.jpg'); /* Фоновое изображение */
  background-position: center top;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  }
  .wrapped {
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
  color: #eee0fb;
  text-shadow: 0 2px 0 #565050;
}
  .wrapped h1 {
  color: #97e2ff;
  font-size: 45px;
  font-weight: 700;
  padding: 0px 0 0px 15px;
  margin: 0 0 30px 0;
  text-transform: uppercase;
  text-shadow: 0 2px 0 #ffffff;
}
  .middle {
  display: table-cell;
  vertical-align: middle;
  }
  .inner {
  margin-left: auto;
  margin-right: auto;
  }
  .counter-class > div{
  display: inline-block;
  }
  .counter-class .counter-days,
  .counter-class .counter-hours,
  .counter-class .counter-minutes,
  .counter-class .counter-seconds{
  font-weight: 100;
  font-size: 50px;
  }
  </style>
  </head>
  <body>




  <div class="wrapped">
  <div class="middle">
  <div class="inner">
  <h1>До открытия<br>Осталось</h1>
  <div class="counter-class" data-date="2019-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>
  </div>
  </div>
  </div>

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

  <script type="text/javascript">
  $(document).ready(function(){
  loopcounter('counter-class');
  });
  </script>
</body></html>

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

Демонстрация

02 Ноября 2019 Загрузок: 2 Просмотров: 1323 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0