Применение часов для 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
-
.hours&class="hours"- Часы -
.min&class="min"- Минуты -
.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.