Jquery часы для сайта

Сейчас попробуем создать красивые (разноцветные) часы для сайта, с использованием Jquery и плагина для него под названием tzineClock который сам создаст нам эти часы, то есть нам ничего не придется делать (писать CSS стили для часов) нужно будет просто подключить Jquery и плагин к нашей странице… Вот скрин наших будущих часов и демо:

демо
Сперва нам нужно подключить css стили tzineClock и наши стили для страницы и скрипты Jquery и tzineClock в header’e:

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzineClock/jquery.tzineClock.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tzineClock/jquery.tzineClock.js"></script>
<script type="text/javascript" src="script.js"></script>

Как вы видите на Jquery мы ссылаемся к гуглу… А tzineClock вы можете скачать отсюда для подключения к странице он состоит из 3 картинок и 2 файлов css и js. Последний скрипт script.js который мы включаем это наш собственный скрипт который на нужно будет набрать самим.
Далее единственное что нам понадобиться сделать ето создать один блок с классом fancyClock, а остальное за нас сделает tzineClock:

<div id="fancyClock"></div>

Давайте посмотрим как выглядит наш файл style.css который мы сдаем сами для страницы с часами:
style.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Сброс стилей */
	margin:0;
	padding:0;
}

body{
	color:#dddddd;
	font-size:13px;
	background: #302b23;
	font-family:Arial, Helvetica, sans-serif;
}

#fancyClock{
	margin:40px auto;
	height:200px;
	border:1px solid #111111;
	width:600px;
}

Сперва у нас идет простой сброс стилей для кроссбраузерности, далее описывается тело нашей страницы body здесь цвет текста, размер текста, цвет фона и шрифт. После чего идет описания блока в котором будут находится наши часы это блок с id fancyClock для него мы указываем расположение, высоту 200пикселей, границы, и ширину.
Рассмотрим наш файл script.js:

$(document).ready(function(){
	/* Этот скрипт запускается после загрузки всех DOM элементов */

	$('#fancyClock').tzineClock();

});

Вот и все наши часы работают…демо