Clock jQuery / Дизайн / Плагины Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.0.1

Каталог: Плагины Bootstrap

Категория: Дизайн

Bootstrap: 3, 4

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

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

Вес файла: 38.4 Kb

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

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

Скачать бесплатно

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

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

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

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

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

Авторство: https://github.com/CaptDai/clock

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

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

Теги: Plugin, Bootstrap, Clock

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

Добавлено: 2017-12-02 в 14:11

Метка: 1583136429

⇄ ⇅

<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/3.1.1/jquery.min.js"></script>
<script src="https://bootstraptema.ru/plugins/2017/clock-jquery/clock-1.1.0.min.js"></script>

<style>
/* background demo style */
body {
background: #ADA996;
background: -webkit-linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996);
background: linear-gradient(to right, #EAEAEA, #DBDBDB, #F2F2F2, #ADA996); 
} 
/* bootstraptema original style clock */ 
.clock {
 position: relative;
 width: 205px !important;
 height: 300px !important;
}
canvas {
 width: 100%; 
}
canvas:nth-child(1) {
 height: 205px;
}
canvas:nth-child(2) {
 height: 290px;
}
@media(max-width:1080px){
.clock { 
 width: 190px !important;
 height: 275px !important;
} 
canvas:nth-child(1) {
 height: 190px;
}
canvas:nth-child(2) {
 height: 270px;
}
}
@media(max-width:800px){
.clock {
 width: 165px !important;
 height: 240px !important;
}
canvas:nth-child(1) {
 height: 165px;
}
canvas:nth-child(2) {
 height: 230px;
}
}
@media(max-width:667px){
.clock {
 width: 200px !important;
 height: 290px !important;
 float: none;
 margin: 0 auto;
}
canvas:nth-child(1) {
 height: 200px;
}
canvas:nth-child(2) {
 height: 280px;
}
}
@media(max-width:320px){
.clock {
 width: 170px !important;
 height: 250px !important; 
}
canvas:nth-child(1) {
 height: 170px;
}
canvas:nth-child(2) {
 height: 240px;
}
} 
</style>

<div class="container"><h1 class="text-center">Clock jQuery & BootstrapTema</h1><br /><br />
<div class="row">

<div class="col-md-4"><div class="clock center-block" id="clock"></div></div>
<div class="col-md-4"><div class="clock center-block" id="clock1"></div></div>
<div class="col-md-4"><div class="clock center-block" id="clock2"></div></div>

</div>
</div>

<script> 
 var clock = $("#clock").clock(),
 data = clock.data('clock');

// data.pause();
 // data.start();
 // data.setTime(new Date());

var d = new Date();
 d.setHours(12);
 d.setMinutes(0);
 d.setSeconds(0);

var clock1 = $("#clock1").clock({
 theme: 't2',
 date: d
 });

var clock2 = $("#clock2").clock({
 theme: 't3'
 }); 
 </script>