Главная / Верстка / Веб решения / Дата и время - электронные часы

Дата и время - электронные часы


19.04.2014 12:312703

Дата и время - это универсальный скрипт, который позволяет выводить в реальном времени следующее: год, месяц, число, день недели, текущее время. Внедрить результат работы скрипта можно в любое место страницы.

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

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

Cозданные блоки и стили css рассмотрим поподробнее, так как это уже модернизация предыдущей версии. Поэтому начнем с html контейнера, который в предыдущей версии выглядел так:

<!DOCTYPE>
<html>
<head>
<title>Дата и время (пример использования объекта Date)</title>
<head>
 <meta charset="utf-8">
</head>

  <body onLoad="setTimeout('UpdateTime()',1000);">

       <p>Сегодня <span id="MyDate">??</span> и текущее время <span id="MyTime">??</span>.</p>

  </body>

</html>

Как видно из содержимого, span отвечающий за вывод даты (<span id="MyDate">??</span>) и span отвечающий за вывод времени (<span id="MyTime">??</span>) находятся внутри контейнера <p></p> , который в свою очередь находится внутри <body></body>.

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты. Продаю готовых сайты, контент на разные тематики: интересно, качественно, недорого.

У элемента body есть атрибут onload="setTimeout('UpdateTime()',1000);" который отвечает за выполнение (обновление) функции каждые N секунд, в нашем случае каждую секунду. Подробнее о вызове js функции с помощью атрибута onload можно прочитать здесь.

Чтобы сверстать каркас для электронных часов, нам понадобится общий контейнер, чтобы каждый блок в нем был управляем и предсказуем. Благодаря этому встраивание часов не потянет за собой необходимости изменения кода сайта. Достаточно будет лишь вставить содержимое. Поэтому нам понадобятся такие блоки:

1. Общий контейнер (в нем будет выводиться все содержимое).
2. Контейнер для монитора (в нем будут блоки вывода даты и времени).
3. Ножка для крепления (соединяет монитор с подставкой).
4. Сама подставка (с ее помощью будущие часы стоят на ровной поверхности).

С учетом вышесказанного, иерархия содержимого нашего контейнера будет выглядеть так:

 

<div id="Clockwrap">
	<div id="Clocktv">
		<div id="MyTime">Время</div>
		<div id="MyDate">Дата</div>
	</div>
	
	<div id="Clockbline"></div>
	<div id="Clockbplace"></div>
</div>

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

1. Стили для главного контейнера - ширина 250px (оптимально для сайдбара) и свойство position:relative (чтобы объекты позиционировались относительно каркаса а не всего сайта):


#Clockwrap {
    position: relative;
    width: 250px;
}

2. Фон, рамка, закругление углов, тень блоков, выравнивание текста по центру, цвет текста:

#Clocktv, #Clockbplace, #Clockbline {
    background: #343434;
    border: 3px groove #fff;
    border-radius: 2px;
    box-shadow: 0 0 3px #222;
    text-align: center;
    color:#f5f5f5;
}

3. Стили экрана - команда позиционирования объектов внутри относительно экрана, наложение слоя поверх других объектов, ширина, высота, внутренние отступы:

 

#Clocktv {
    position: relative;
    z-index: 10;
    width: 96%;
    height: 110px;
    padding: 10px 2% 2%;
}

4. Стили для вывода времени крупным планом - минимальная высота, размер шрифта, тень текста:

#MyTime {
    min-height: 90px;
    font-size: 310%;
    text-shadow: 1px 1px 1px #fff;
}

5. Стили для вывода даты - размер шрифта, и наклонный стиль:

#MyDate {
    font-size: .7em;
    font-style: italic;
}

6. Стили для ножки - абсолютное позиционирование, отступ слева, отступ сверху, ширина, высота:

 

#Clockbline {
    position: absolute;
    left: 120px;
    top: 110px;
    width: 14px;
    height: 50px;
}

7. Стили для подставки - абсолютное позиционирование, наложение слоя поверх других объектов отступ слева, отступ сверху, ширина, высота, закругление углов:

 

#Clockbplace {
    position: absolute;
    z-index: 10;
    left: 50px;
    top: 150px;
    width: 150px;
    height: 14px;
    border-radius: 10px 10px 1px 1px;
}

8. На этом практически все, стили каркаса электронных часов готовы, но для оживления счетчика, давайте добавим эффект плавно переливающегося текста блоку вывода времени с помощью css анимации:

 

 

#MyTime {
    -webkit-animation: blinkpm 3s linear infinite;
    animation: blinkpm 3s linear infinite;
}

@-webkit-keyframes blinkpm {
    0% {
        color: rgba(255, 0, 0, 0.5);
    }

    25% {
        color: rgba(242, 219, 3, 1);
    }

    50% {
        color: rgba(3, 95, 3, 0.2);
    }

    75% {
        color: rgba(106, 57, 196, 0.5);
    }

    100% {
        color: rgba(255, 0, 0, 1);
    };
}

@keyframes blinkpm {
    0% {
        color: rgba(255, 0, 0, 0.5);
    }

    25% {
        color: rgba(242, 219, 3, 1);
    }

    50% {
        color: rgba(3, 95, 3, 0.2);
    }

    75% {
        color: rgba(106, 57, 196, 0.5);
    }

    100% {
        color: rgba(255, 0, 0, 1);
    };
}


Вот теперь наши электронные часы готовы!

Окажу помощь в разработках или сайты под ключ, пишите запросы в комменты. Продаю готовых сайты, контент на разные тематики: интересно, качественно, недорого.

 



Вы не можете скачивать прикрепленные файлы.
Пожалуйста, включите JavaScript!

Время , Дата , Скрипт





«Дата и время - электронные часы» - Похожие страницы

Дата и время Дата и время Основа скрипта - указание отложенной обработки кода с помощью метода window.setTimeout('UpdateTime()',1000). Запись исходного объекта window можно опустить в случае, если работа идет в текущем окне. Метод з...
Студентам выдадут электронные студенческие билеты Студентам выдадут электронные студенческие билеты++ В Укрaине с 2015 года нaчнут действовать студeнческие билеты нового образцa. С помощью новых докумeнтов, студенты смогут рaсплачиваться в магазинах и использовaть их, как банковские кaрты. Соответствующее по...

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям