• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Таймер обратного отсчёта
Таймер обратного отсчёта
๖ۣۜInspire
Пятница, 14 Февраля 2014 | Сообщение 1
Оффлайн
Vip
Сообщений:598
Награды: 3
Думаю все знают зачем нужен таймер, поэтому перейдём сразу к делу.

Структура 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 (2.0 Kb)




Моё портфолио
Страна: (RU)
Kosten
Пятница, 14 Февраля 2014 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
๖ۣۜInspire, круто.. нет слов!
Страна: (RU)
๖ۣۜInspire
Пятница, 14 Февраля 2014 | Сообщение 3
Оффлайн
Vip
Сообщений:598
Награды: 3
опачки а код прикреплённых файлов не приделан
Kosten, спс




Моё портфолио
Страна: (RU)
๖ۣۜInspire
Пятница, 14 Февраля 2014 | Сообщение 4
Оффлайн
Vip
Сообщений:598
Награды: 3
всё теперь есть



Моё портфолио
Страна: (RU)
Kosten
Пятница, 14 Февраля 2014 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
๖ۣۜInspire, зато Демо есть, это думаю очень важно biggrin

Прикрепления: 7071767.jpg (11.6 Kb)
Страна: (RU)
kredit-oformi
Пятница, 04 Апреля 2014 | Сообщение 6
Оффлайн
Vip
Сообщений:1975
Награды: 5
а реально круто ๖ۣۜInspire, умеет коды составлять, для меня это темный лес wacko
Страна: (RU)
Kosten
Пятница, 04 Апреля 2014 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Он еще не то может. И шаблон на сайт создать оригинальный.
Страна: (RU)
White_Wolf
Воскресенье, 06 Апреля 2014 | Сообщение 8
Оффлайн
Пользователи
Сообщений:124
Награды: 0
а можно этот код сложить воедино с плюшками, и сделать этот таймер под страницу "Идут технические работы"? можно даже с простеньким белым фоном страницы.

Сообщение отредактировал
White_Wolf - Воскресенье, 06 Апреля 2014, 08:48
Страна: (UA)
๖ۣۜInspire
Воскресенье, 06 Апреля 2014 | Сообщение 9
Оффлайн
Vip
Сообщений:598
Награды: 3
White_Wolf, в архиве всё вместе соединено



Моё портфолио
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Таймер обратного отсчёта
  • Страница 1 из 1
  • 1
Поиск: