Страница 1 из 11
Форум про uCoz » Всё для web-мастера » Уроки Веб-мастера » Таймер обратного отсчёта
Таймер обратного отсчёта
๖ۣۜInspire
Дата: Пятница, 14.02.2014, 17:36 | Сообщение # 1
Администраторы
Сообщений:598
Награды: 2


Думаю все знают зачем нужен таймер, поэтому перейдём сразу к делу.

Структура 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 - адрес страницы переадресации
------------------------------
Пока это всё, в скором времени хочу сделать сервис по генерации вот таких вот таймеров, кто захочет помочь с дизайном таймеров или с доп. функционалом пишите в ЛС.

Смотрим ДЕМО

Исходники таймера в прикреплённом архиве
Прикрепления: timer.rar(2Kb)




Моё портфолио
Kosten
Дата: Пятница, 14.02.2014, 17:44 | Сообщение # 2
Администраторы
Сообщений:12664
Награды: 39


๖ۣۜInspire, круто.. нет слов!

๖ۣۜInspire
Дата: Пятница, 14.02.2014, 17:55 | Сообщение # 3
Администраторы
Сообщений:598
Награды: 2


опачки а код прикреплённых файлов не приделан
Kosten, спс




Моё портфолио
๖ۣۜInspire
Дата: Пятница, 14.02.2014, 18:03 | Сообщение # 4
Администраторы
Сообщений:598
Награды: 2


всё теперь есть



Моё портфолио
Kosten
Дата: Пятница, 14.02.2014, 18:08 | Сообщение # 5
Администраторы
Сообщений:12664
Награды: 39


๖ۣۜInspire, зато Демо есть, это думаю очень важно biggrin

Прикрепления: 7071767.jpg(12Kb)


kredit-oformi
Дата: Пятница, 04.04.2014, 22:43 | Сообщение # 6
Vip
Сообщений:1953
Награды: 5


а реально круто ๖ۣۜInspire, умеет коды составлять, для меня это темный лес wacko
Kosten
Дата: Пятница, 04.04.2014, 23:22 | Сообщение # 7
Администраторы
Сообщений:12664
Награды: 39


Он еще не то может. И шаблон на сайт создать оригинальный.

White_Wolf
Дата: Воскресенье, 06.04.2014, 08:48 | Сообщение # 8
Пользователи
Сообщений:124
Награды: 0


а можно этот код сложить воедино с плюшками, и сделать этот таймер под страницу "Идут технические работы"? можно даже с простеньким белым фоном страницы.

Сообщение отредактировал White_Wolf - Воскресенье, 06.04.2014, 08:48
๖ۣۜInspire
Дата: Воскресенье, 06.04.2014, 12:10 | Сообщение # 9
Администраторы
Сообщений:598
Награды: 2


White_Wolf, в архиве всё вместе соединено



Моё портфолио
Форум про uCoz » Всё для web-мастера » Уроки Веб-мастера » Таймер обратного отсчёта
Страница 1 из 11
Поиск: