Плавный таймер отсчета времени для сайта

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

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

1. Прежде всего скачиваем архив;
2. Вставляем следующий код до тега

Не забываем указывать необходимые адреса файлов javascript:

[sourcecode language=»javascript»]

[/sourcecode]

3. В свой файл Style.CSS добавляем:

[sourcecode language=»css»]
.time_limit_text, .time_limit_counter, .coupon_info_panel_in_preview_second .more_link {
position: absolute;
color: #fff;
}
.time_limit_text {
top: 20px;
left: 0;
font-size: 12px;
font-style: italic;
}
.time_limit_counter {
top: 7px;
left: 125px;
color: #ae929b;
font-size: 10px;
text-align: center;
}
.time_counter {
border: 1px solid #d98154;
margin-top: 3px;
background-color: #000;
}
.time_bg{
color: #fff;
text-align: center;
padding-top: 3px;
font: 18px bold Arial;
background-image: url(../images/counter_image.png);
background-repeat: repeat-x;
height: 26px;
padding: 3px 6px 0 5px;
display: inline-block;
}
.time_counter span.middle {
margin: 0 1px; }
.time_counter span.middle2 {
margin: 0 1px 0 0;
}
/* стили скрипта счетчика */
.dash {
float: left;
position: relative;
}
.dash .digit {
float: left;
text-align: center;
color: #fff;
font-family: Arial;
position: relative;
}
.dash_title {
position: absolute;
display: block;
bottom: 0px;
right: 6px;
}
[/sourcecode]

4. Скачиваем изображение счетчика.

5. В необходимом месте на сайте выводим таймер:

[code lang=»html»]

[/code]

6. Как Вы наверняка догадались, чтобы счетчик делал отсчет от необходимой даты, редактируем эти данные

[html]
‘day’: 16,
‘month’: 02,
‘year’: 2012,
‘hour’: 23,
‘min’: 59,
‘sec’: 59 [/html]

Удачного настроения, уверен, что данный таймер придется Вам по душе 🙂