Адаптивные часы Bootstrap · jQuery

Адаптивные часы Bootstrap

Вы можете сделать на своём сайте адаптивные часы используя базовые классы плагина Bootstrap, в качестве скрипта часов применяется библиотека jQuery.

Применение часов для Bootstrap

Применение скрипта jQuery для Bootstrap

Для работы скрипта часов Bootstrap на Вашем сайте должна быть подключена библиотека jQuery, скрипт рекомендуется разместить перед закрывающим тегом </body>.

<script>
$(document).ready(function() {
setInterval( function() {
var hours = new Date().getHours();
$(".hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
setInterval( function() {
var minutes = new Date().getMinutes();
$(".min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
var seconds = new Date().getSeconds();
$(".sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
});
</script>

Описание селекторов скрипта jQuery для Bootstrap

  1. .hours & class="hours" - Часы
  2. .min & class="min" - Минуты
  3. .sec & class="sec" - Секунды

Использование групп кнопок Bootstrap в качестве часов

В качестве часов задействованы элементы групп кнопок плагина Bootstrap.








<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-default hours"></button>
<button type="button" class="btn btn-default min"></button>
<button type="button" class="btn btn-default sec"></button>
</div>

<br><br>

<div class="btn-group">
<button type="button" class="btn btn-default hours"></button>
<button type="button" class="btn btn-default min"></button>
<button type="button" class="btn btn-default sec"></button>
</div>

<br><br>

<div class="btn-group btn-group-sm">
<button type="button" class="btn btn-default hours"></button>
<button type="button" class="btn btn-default min"></button>
<button type="button" class="btn btn-default sec"></button>
</div>

<br><br>

<div class="btn-group btn-group-xs">
<button type="button" class="btn btn-default hours"></button>
<button type="button" class="btn btn-default min"></button>
<button type="button" class="btn btn-default sec"></button>
</div>

Использование ссылок Bootstrap в качестве часов

В примере используются ссылки Bootstrap.

  • :
  • :

<ul class="pager">
<li><a class="btn btn-default navbar-btn hours"></a></li> :
<li><a class="btn btn-default navbar-btn min"></a></li> :
<li><a class="btn btn-default navbar-btn sec"></a></li>
</ul>

Использование центровки Bootstrap в качестве часов

Для примера взят класс центровки элементов плагина Bootstrap.

  • :
  • :

  • <div class="text-center">
    <li class="btn btn-default hours"></li> :
    <li class="btn btn-default min"></li> :
    <li class="btn btn-default sec"></li>
    </div>
    

    Использование значков Bootstrap в качестве часов

    Использование badge значков плагина Bootstrap.

    : :

    <div class="text-center">
    <a><span class="badge hours"></span></a> :
    <a><span class="badge min"></span></a> :
    <a><span class="badge sec"></span></a>
    </div>
    

    Использование меню Bootstrap в качестве часов

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

    Свободное использование скрипта jQuery - Демо

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

    : :

    <style>
    #jqueryScriptClock {
    text-align: center;
    }
    #jqueryScriptClock * {
    font-family: 'Tahoma';
    padding: 8px;
    background: #f7f7f7;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bababa));
    background: linear-gradient(0% 0% 270deg,#fff, #bababa);
    border-radius: 50%;
    font-size: 2rem;
    color: #999;
    }
    </style>
    <div id="jqueryScriptClock">
    <span class="hours"></span> : 
    <span class="min"></span> : 
    <span class="sec"></span>
    </div>
    <script>
    $(document).ready(function() {
    setInterval( function() {
    var hours = new Date().getHours();
    $(".hours").html(( hours < 10 ? "0" : "" ) + hours);
    }, 1000);
    setInterval( function() {
    var minutes = new Date().getMinutes();
    $(".min").html(( minutes < 10 ? "0" : "" ) + minutes);
    },1000);
    setInterval( function() {
    var seconds = new Date().getSeconds();
    $(".sec").html(( seconds < 10 ? "0" : "" ) + seconds);
    },1000);
    }); 
    </script>
    

    Предоставленные варианты часов Bootstrap используются на дефолтных стилях плагина, разнообразить вид элементов Вы сможете изменив Стили для плагина bootstrap.


    Рейтинг: 4.8/5 из 5



    Добавлено Автор Ник Источник Просмотров Комментариев Теги
    18-03-2015 Михаил Меренков aTmpl © 1015 0 часы jquery, часы bootstrap, адаптивные часы