Адаптивные цифровые часы

Адаптивные часы цифровые

Адаптивные часы с цифровым дисплеем, Вы можете установить любой цвет и размер часов по своему желанию, сделано подробное описание по настройке и применению.

Установка и настройка адаптивных цифровых часов

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

Перед установкой часов убедитесь что у вас подключена библиотека jQuery, добавьте стили часов и скрипт управления в любое место страницы, код часов разместите в том месте, в котором Вы хотите видеть работающие часы.

Стили часов

<style>
.block-clock {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.digit {
padding: 4px 8px;
margin: 10px 4px;
background: #f7f7f7;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bababa));
background: -moz-linear-gradient(0% 0% 270deg,#fff, #bababa);
border-radius: 3px;
font-family: Tahoma;
font-size: 1em;
line-height: 1em;
color: #999;
}
.separator-clock {
font-family: Tahoma;
line-height: 1em;
font-size: 1em;
color: #999;
}
</style>

Скрипт часов

<script>
function parseDigit(digit)
{
var startTag = '<span class="digit">';
var endTag = '</span>';
if (digit < 10)
{
return startTag + '0' + endTag + startTag + digit + endTag;
}
else
{
return startTag + Math.floor(digit / 10) + endTag + startTag + (digit % 10) + endTag;
}
return '--';
}
function getTime()
{
var d = new Date($.now());
return parseDigit(d.getHours()) + '<span class="separator-clock">:</span>' + parseDigit(d.getMinutes()) + '<span class="separator-clock">:</span>' + parseDigit(d.getSeconds());
 }
function onTick()
{
var time = getTime();
$('.block-clock').html(time);
setTimeout(onTick, 1000);
}
function tick()
{
setTimeout(onTick, 1000);
}
$(document).ready(function() {
tick(); 
});
</script>

Код часов

<div class="block-clock"><div>

Настройка часов

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

Описание селекторов часов

.block-clock
margin-left: 0 auto; - Свойство устанавливает часы по центру
.digit
padding: 4px 8px; - Внутренние отступы, первое значение = сверху\снизу, второе = справа\слева
margin: 10px 4px; - Внешние отступы, первое значение = сверху\снизу, второе = справа\слева
background: #f7f7f7; - Фон ячеек цифр для браузеров не понимающих градиенты
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bababa)); - Градиент для браузера Chrome
background: -moz-linear-gradient(0% 0% 270deg,#fff, #bababa); - Градиент для браузера Mozila
border-radius: 3px; - Закругление углов
font-family: 'Tahoma'; - Семейство шрифта
font-size: 1em; - Размер цифр
line-height: 1em; - Межстрочный интервал
color: #999; - Цвет цифр
.separator-clock
font-family: 'Tahoma'; - Семейство шрифта
line-height: 1em; - Межстрочный интервал
color: #999; - Цвет цифр

Настройка размеров часов

При установке размеров понадобится использовать ситуацию с расположением часов и индивидуальные особенности соседних элементов вёрстки, Вам самим придётся определить целесообразность использования размеров. По умолчанию часы имеют значение величины шрифта font-size: 1em;, но можно это значение увеличить используя адаптивное свойство @media. Применение свойства позволит увеличить шрифт для установленных размеров экранов, какими они будут сможете определить только Вы. В пример ниже, каждому последующему размеру ширины добавляется значение в 1 единицу em = 16px, для значений свойств селекторов играющих роль в увеличении размеров. При этом можно ограничится одним размером, например для @media(min-width: 320px). Если Вы удалите остальные в сторону увеличения, тогда размеры шрифта часов не превысят величины font-size: 2em;, но изменят значение на font-size: 1em; если размер ширины экрана будет меньше 320px.

Пример применения свойства @media

Понадобится изменять свойства 2 селекторам .digit и .separator-clock используя свойство @media, а точнее их свойствам font-size: 1em; и line-height: 1em;.

@media(min-width: 320px) {
.digit {
font-size: 2em;
line-height: 2em;
}
.separator-clock {
line-height: 2em;
font-size: 2em;
}
}
@media(min-width: 480px) {
.digit {
font-size: 3em;
line-height: 3em;
}
.separator-clock {
line-height: 3em;
font-size: 3em;
}
}
@media(min-width: 768px) {
.digit {
font-size: 4em;
line-height: 4em;
}
.separator-clock {
line-height: 4em;
font-size: 4em;
}
}
@media(min-width: 1024px) {
.digit {
font-size: 5em;
line-height: 5em;
}
.separator-clock {
line-height: 5em;
font-size: 5em;
}
}
Чтобы увидеть происходящие изменения сужайте размеры окна браузера, с изменением размеров ширины окна будут изменяться размеры часов.

Пробуем экспериментировать сами

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

Таблица цветов для экспериментов

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


Рейтинг: 4.5/5 из 2



Добавлено Автор Ник Источник Просмотров Комментариев Теги
13-12-2014 Михаил Меренков aTmpl © 548 0 responsive clock, adaptive clock, адаптивные часы