вход

Как сделать цифровые часы при помощи jQuery и CSS3

Как сделать цифровые часы при помощи jQuery и CSS3

Здравствуйте уважаемые читатели блога mainview.ru.  Сегодня я хочу показать вам, как создать простые цифровые часы с датой и временем при помощи JQuery и CSS3. А чтобы сделать часы более динамичными, добавим также немного  анимации. Как вы увидите, реализация очень проста, и открывает большое поле для творчества. Поняв как это работает, вы сможете изменять и модифицировать все под ваши нужды.

Как это выглядит

Ниже приведен скриншот страницы, на которой выведены цифровые часы, созданные при помощи JQuery и CSS3.

Как сделать цифровые часы при помощи JQuery и CSS3

 

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

 

HTML

Разметка наших часов предельно проста, и гибко адаптируется под любой другой сценарий, который вам нужно реализовать. Внутри основного тега <div class="clock"> с классом clock, располагаем два других тега. Первый тег <div id="Date"> с идентификатором Date содержит дату, а в немаркированном списке расположены элементы цифровых часов, этот список будет содержать часы, минуты и секунды.

 


<div class="container">
	<div class="clock">
		<div id="Date"></div>
		<ul>
			<li id="hours"> </li>
		    <li id="point">:</li>
		    <li id="min"> </li>
		    <li id="point">:</li>
		    <li id="sec"> </li>
		</ul>
	</div>
</div>

 

CSS

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

 


.container {
        width: 800px;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;

}

.clock {
        width:758px;
        margin:0 auto;
        padding:20px;
        border:1px solid #999;
        color:#fff;
        background:#000;               
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
}

#Date {
        font-family:Tahoma, Geneva, sans-serif;
        font-size:56px;
        text-align:center;
        text-shadow:0 0 15px #00c6ff;
        font-weight: bold;
}

ul {
        width:758px;
        margin:0 auto;
        padding:0px;
        list-style:none;
        text-align:center;
}
ul li {
        display:inline;
        font-size:10em;
        text-align:center;
        font-family:Tahoma, Geneva, sans-serif;
        text-shadow:0 0 15px #00c6ff;
        font-weight: bold;
}

#point {
        position:relative;
        -moz-animation:mymove 1s ease infinite;
        -webkit-animation:mymove 1s ease infinite;
        padding-left:10px;
        padding-right:10px;
}

@-webkit-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }	
}


@-moz-keyframes mymove 
{
0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}
50% {opacity:0; text-shadow:none; }
100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }	
}

 

jQuery

В начале, мы подключаем саму библиотеку jQuery.

 

<script type="text/javascript" src="jquery.min.js"></script>

 

Затем прописываем код, который и будет выводить дату, часы, минуты и секунды, формируя тем самым собственно цифровые часы.

 

<script type="text/javascript">
$(document).ready(function() {
						   
		// определяем массивы имен для месяцев и дней недели
		var monthNames = ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря" ]; 
		var dayNames= ["воскресенье","понедельник","вторник","среда","четверг","пятница","суббота"]

		// создаем новый объект для хранения даты
		var newDate = new Date();
		
		// извлекаем текущую дату в новый объект
		newDate.setDate(newDate.getDate());
		
		// выводим день число месяц и год
		$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());

		setInterval( function() {
				// создаем новый объект для хранения секунд
				var seconds = new Date().getSeconds();
				// добавляем отсутствующий ноль
				$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
		},1000);
	
		setInterval( function() {
				// создаем новый объект для хранения минут
				var minutes = new Date().getMinutes();
				// добавляем отсутствующий ноль
				$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
		},1000);
	
		setInterval( function() {
				// создаем новый объект для хранения часов
				var hours = new Date().getHours();
				// добавляем отсутствующий ноль
				$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
		}, 1000);
	
}); 
</script>

 

Логика

Логика работы надеюсь, вам понятна, и не требует особых разъяснений.

new Date() 

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


setDate() и getDate() 

Метод setDate() определяет день месяца (от 1 до 31), согласно локальному времени, а метод getDate() возвращает день месяца (от 1 до 31) для определенной даты.


getSeconds(), getMinutes() and getHours() 

Эти методы позволяют получить секунды, минуты и часы текущего времени вашего компьютера.

( seconds < 10 ? "0" : "" ) + seconds) 


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

setInterval function 

Функция setInterval это стандартная JavaScript функция, не является частью jQuery. Вы также можете создать следующую функцию, для получения, например миллисекунд.

Заключение

На этом все. Остается только проверить работоспособность наших часов в браузере. Как видите очень просто можно создать цифровые часы при помощи JQuery и CSS3. Замечания и предложения можете оставлять в комментариях.

 

 

 

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
Оставить комментарий

Статья → Как сделать цифровые часы при помощи jQuery и CSS3

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.