Адаптивные круглые часы / Часы / Сниппеты Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Часы

Для Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Вес файла: 3.1 Kb

Уникальный ID: 2389

Количество символов:

Посмотрели: 3008 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-2389-20

Скачали бесплатно: 140 раз

Прокомментировали: 0 раз

Рейтинг: 4.4 / 5 - 5 голосов

Тип лицензии: CC BY 4.0

Авторство: Посмотреть

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, Clock, сниппет, Bootstrap, Часы

Поделился: BootstrapТема

Добавлено: 2017-10-02 в 15:05

Метка: 1566151342

⇄ ⇅

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/thooclock/jquery.thooClock.js"></script>

<style>
/* background style */
body{
background: #FC354C;
background: -webkit-linear-gradient(to right, #0ABFBC, #FC354C);
background: linear-gradient(to right, #0ABFBC, #FC354C);
}
/* clock style */
#myclock canvas{
width:100%;
max-width:100%;
}
</style>

<div class="container">
<div class="row">

<div class="col-md-6 col-md-offset-3">

<div id="myclock"></div>

</div>

</div>
</div>

<script>
 $(document).ready(function(){
 $('#myclock').thooClock({
 size:$(document).width()/1.4,
 dialColor:'#fff',
 dialBackgroundColor:'transparent',
 secondHandColor:'#F3A829',
 minuteHandColor:'#e74c3c',
 hourHandColor:'#8bad4e',
 showNumerals:true,
 brandText:'BootstrapTema',
 brandText2:'Russia',
 });

});
</script>