Думаю все знают зачем нужен таймер, поэтому перейдём сразу к делу.
Структура HTML
Код
<div id="timer">
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
<div id="names"><span>Часы</span><span>Минуты</span><span style="margin-left:-1px;">Секунды</span></div>
</div>
Есть див для часов, минут, секунд и спаны с подписями под каждым числом. Структура простейшая.
CSS
Код
#hours, #minutes, #seconds {
background: -webkit-linear-gradient(top,#404040,#202020);
background: -moz-linear-gradient(top,#404040,#202020);
background: -o-linear-gradient(top,#404040,#202020);
background: -ms-linear-gradient(top,#404040,#202020);
box-shadow: 0 1px 5px #303030,inset 0 1px 0 #3d3d3d;
padding-top: 9px;
font: 16px arial;
color: white;
float: left;
margin-right: 15px;
border-radius: 2px;
text-align: center;
width: 40px;
height: 30px;
text-shadow: 0 1px 6px black;
}
.in{
box-shadow:inset 0 1px 5px #202020 !important;
-moz-box-shadow:inset 0 1px 5px #202020 !important;
-o-box-shadow:inset 0 1px 5px #202020 !important;
-ms-box-shadow:inset 0 1px 5px #202020 !important;
}
.out{
box-shadow: 0 1px 5px #303030,inset 0 1px 0 #505050;
-ms-box-shadow: 0 1px 5px #303030,inset 0 1px 0 #505050;
-moz-box-shadow: 0 1px 5px #303030,inset 0 1px 0 #505050;
-o-box-shadow: 0 1px 5px #303030,inset 0 1px 0 #505050;
}
#timer {
margin: -20px 0 0 -67px;
top: 50%;
left: 50%;
position: absolute;
width: 166px;
height: 40px;
}
#names {
color: #ccc;
font: 10px arial;
text-shadow: 0 1px 8px #000;
}
#names span {
width: 40px;
float: left;
text-align: center;
margin-right: 15px;
margin-top: 6px;
}
Весь таймер на чистом CSS без картинок, что способствует быстрой загрузке
И самое главное, без которого не будет ничего работать - скрипт на языке программирования JavaScript.
Объявим все нужны нам переменные
Код
var message,messagetext,textd,site,sitehref;
var hour2,sec2,min2;
var set;
var whil1;
var hour1=document.getElementById("hours");
var min1=document.getElementById("minutes");
var names=document.getElementById("names");
var sec1=document.getElementById("seconds");
a=hour;
b=min;
c=sec;
-------------------------------
Напишем саму функцию таймера
Код
function timer(){
sec--
if (sec==-1){
sec=59;
min--
}
if (min==-1){
min=59;
hour--
}
hour1.innerHTML=hour;
min1.innerHTML=min;
sec1.innerHTML=sec;
}
т.е. вычитаем секунды, и если секунд -1 то вычитаем единицу из минут, и также для часов. И сообщаем дивам содержимое соответствующим им элементам с помощью свойства innerHTML(можно было использовать write()).
Чтобы таймер каждый раз обновлялся, нужна функция setInterval(), она через каждый равный заданный промежуток времени вызывает нужную вам функцию, в данном случае она будет выглядеть вот так set=setInterval(timer,1000)(функция timer вызывается каждую секунду).
Следующим шагом напишем функцию, которая переводит время в минуты и часы(например какой-то кретин объявил 134 секунды и 69 минут, то в таком случае у нас на таймере будет время - 1 часов, 11 минут, 14 секунд.
Вот эта функция
Код
if (sec>59){
sec2=Math.floor(sec/60)
min +=sec2
sec -= 60*sec2
}
if (min>59){
min2=Math.floor(min/60)
hour +=min2
min -= 60*min2
}
hour1.innerHTML=hour;
min1.innerHTML=min;
sec1.innerHTML=sec;
Вот впринципе таймер и готов, но я не люблю чистые функции без всяких разных плюшек.
Функция скрытия/нескрытия подписей под таймером
Код
if (textd==false){
names.style.display="none";
}
Какой таймер без анимации?
Код
function out(){
if (sec % 2 ==0){
sec1.className="in"
}else{
sec1.className="out"
}
if (sec ==0){
min1.className="in"
}else{
min1.className="out"
}
if (min ==0 && sec==0){
hour1.className="in"
}else{
hour1.className="out"
}
}
Как работает можно увидеть в ДЕМО
Ещё несколько плюшек в одной функции
Код
function whil(){
//если время кончилось
if(hour==0 && min==0 && sec==0){
if (message==true){
alert(messagetext);
}
if (site==true){
window.location.href = sitehref;
}
if (whil1==true){
hour=a
min=b
sec=c+1//ставим на 1 единицу больше
}else if (whil1==false){
clearInterval(set);
clearInterval(set2);
}
}
}
По окончании таймера вторым условием мы выводим, если нужно, сообщение в алерте
Третим условием, если нужно, мы переадресовываем пользователя на нужную нам страницу
Четвёртое услови у нас отвечает за зацикленность таймера, т.е. если время кончилось, то таймер начнёт отсчитывать время заново.
Опять чтобы всё это постоянно проверялось нужно задать интервалы
Код
set1=setInterval(out,1000);
set2=setInterval(whil,1000);
А теперь пора узнать как управлять всем этим, а вот как:
Код
<script>
var hour=0;
var min=69;
var sec=134;
whil1=true;
message=false;
messagetext="Message";
textd=false;
site=false;
sitehref="http://zornet.ru"
</script>
Запехиваем это после HTML таймера.
Вот описание всего этого:
---------------------------------------
//***Powered by Inspire 2014***//
Переменные:
hour - кол-во часов
min - кол-во минут
sec - кол-во секунд
whil1 - если таймер должен перезапускаться при достижении 0 то ставим true, если нет false
message - если нужно выводить сообщение по окончании времени то ставим true
messagetext - текст сообщения
textd - если нужны подписи под временем ставим true
site - если нужна переадресация на другую страницу ставим true
sitehref - адрес страницы переадресации
------------------------------
Пока это всё, в скором времени хочу сделать сервис по генерации вот таких вот таймеров, кто захочет помочь с дизайном таймеров или с доп. функционалом пишите в ЛС.
Смотрим ДЕМО
Исходники таймера в прикреплённом архиве