Стильный счетчик на jQuery

Стильный jQuery счетчик для вашего сайта

· jQuery и JavaScript, Библиотеки и Блог · 5 мин чтения

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

Этот плагин прекрасно подойдет для страницы «Сайт временно не доступен», чтобы показать визуально пользователям сколько осталось ждать до открытия и тд.

Посмотреть демо | Скачать плагин

Установка счетчика

  1. Для начала вам нужно установить jQuery и скрипты счетчика. По этой ссылке вы можете скачать сам плагин. Устанавливает все скрипты перед </body> .
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="js/kinetic.js"></script> 
    <script type="text/javascript" src="../jquery.final-countdown.js"></script>
  2. Далее вам нужно установить bootstrap 3 стили в голове вашего документа между — <head></head>.
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  3. Счетчик использует следующую структуру HTML, лучше всего просто скопировать или взять из исходника плагина (на первом этапе была ссылка для скачки плагина).
    <div class="countdown countdown-container container">
        <div class="clock row">
            <div class="clock-item clock-days countdown-time-value col-sm-6 col-md-3">
                <div class="wrap">
                    <div class="inner">
                        <div id="canvas-days" class="clock-canvas"></div>
    
                        <div class="text">
                            <p class="val">0</p>
                            <p class="type-days type-time">ДНЕЙ</p>
                        </div><!-- /.text -->
                    </div><!-- /.inner -->
                </div><!-- /.wrap -->
            </div><!-- /.clock-item -->
    
            <div class="clock-item clock-hours countdown-time-value col-sm-6 col-md-3">
                <div class="wrap">
                    <div class="inner">
                        <div id="canvas-hours" class="clock-canvas"></div>
    
                        <div class="text">
                            <p class="val">0</p>
                            <p class="type-hours type-time">ЧАСОВ</p>
                        </div><!-- /.text -->
                    </div><!-- /.inner -->
                </div><!-- /.wrap -->
            </div><!-- /.clock-item -->
    
            <div class="clock-item clock-minutes countdown-time-value col-sm-6 col-md-3">
                <div class="wrap">
                    <div class="inner">
                        <div id="canvas-minutes" class="clock-canvas"></div>
    
                        <div class="text">
                            <p class="val">0</p>
                            <p class="type-minutes type-time">МИНУТ</p>
                        </div><!-- /.text -->
                    </div><!-- /.inner -->
                </div><!-- /.wrap -->
            </div><!-- /.clock-item -->
    
            <div class="clock-item clock-seconds countdown-time-value col-sm-6 col-md-3">
                <div class="wrap">
                    <div class="inner">
                        <div id="canvas-seconds" class="clock-canvas"></div>
    
                        <div class="text">
                            <p class="val">0</p>
                            <p class="type-seconds type-time">СЕКУНД</p>
                        </div><!-- /.text -->
                    </div><!-- /.inner -->
                </div><!-- /.wrap -->
            </div><!-- /.clock-item -->
        </div><!-- /.clock -->
    </div><!-- /.countdown-wrapper -->
  4. И теперь нужно добавить стили для HTML каркаса, чтобы он стал смотреться как должен.
    .countdown-container {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      transform: translateY(-50%);
    
    }
    
    .clock-item .inner {
      height: 0px;
      padding-bottom: 100%;
      position: relative;	
      width: 100%;
    }
    
    .clock-canvas {
      background-color: rgba(255, 255, 255, .1);
      border-radius: 50%;
      height: 0px;
      padding-bottom: 100%;
    }
    
    .text {
      color: #fff;	
      font-size: 30px;
      font-weight: bold;	
      margin-top: -50px;
      position: absolute;
      top: 50%;
      text-align: center;
      text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
      width: 100%;
    }
    
    .text .val {
      font-size: 50px;
    }
    
    .text .type-time {
      font-size: 20px;
    }
    
    @media (min-width: 768px) and (max-width: 991px) {
      .clock-item {
        margin-bottom: 30px;		
      }
    }
    
    @media (max-width: 767px) {
      .clock-item {
        margin: 0px 30px 30px 30px;
      }
    }

     

На этом все. Если у вас есть какие-либо вопросы — не стесняйтесь задавать их в комментарии ниже.