Иногда бывает ситуация, когда нужно установить таймер до какого либо события (начала акции, конца света:) ), для этого очень удобно испльзовать javascript с jQuery и библиотекой timers.
В моем примере используются графические цифры-картинки заключенные в блоки:
<
div id=
"digit1"><
/div>
<
div id=
"digit2"><
/div>
<
div id=
"digit3"><
/div>
<
div id=
"digit4"><
/div>
<
div id=
"digit5"><
/div>
В данном случае таймер будет иметь 5 разрядов. Переключение цифр производиться сменой атрибута class="" блоков. Таблица стилей для цифр содержит следующее:
.d1 {
background:
url(/images/digits/digits.png) 0 -1px scroll !important;
}
.d2 {
background:
url(/images/digits/digits.png) 0 259px scroll !important;
}
.d3 {
background:
url(/images/digits/digits.png) 0 230px scroll !important;
}
.d4 {
background:
url(/images/digits/digits.png) 0 201px scroll;
}
.d5 {
background:
url(/images/digits/digits.png) 0 175px scroll;
}
.d6 {
background:
url(/images/digits/digits.png) 0 147px scroll;
}
.d7 {
background:
url(/images/digits/digits.png) 0 118px scroll;
}
.d8 {
background:
url(/images/digits/digits.png) 0 90px scroll;
}
.d9 {
background:
url(/images/digits/digits.png) 0 60px scroll;
}
.d0 {
background:
url(/images/digits/digits.png) 0 30px scroll;
}
Немного разъясню: все изображения цифр находятся в одном файле но для отображения одной цифры используется смещение фона, каждая цифра имеет размер 15х25 пикселей.
Вот используемая картинка:
Дальше приведу javascript код с комментариями:
В данном примере отсчет идет в минутах, для того, чтобы изменить размерность отсчета нужно поменять первый параметр функции everyTime(), размерность задана в милисекундах. На этом все!