Таймер обратного отсчета

В этом уроке мы поставим таймер обратного отсчета времени и привяжем к какому-нибудь событию. Пусть у нас 1 января 2015 года в 12 часов дня у нас будет какое-нибудь знаменательное событие :) До этого времени мы посетителям нашего сайта будем показывать таймер обратного отсчета, а в час Х....

а) Отправим пользователя на какой-либо сайт

б) Либо просто что-нибудь ему скажем

demosourse

Ну что ж, приступим.

В нужном месте, там где мы планируем выводить наш таймер, подключаем скрипт:

<SCRIPT language="JavaScript" SRC="countdown.php?timezone=Asia/Yekaterinburg&countto=2015-01-01 12:00:00&do=r&data=http://ruseller.com"></SCRIPT>

В этой же строке проводятся все настройки скрипта через GET - параметры:
timezone = - Ваша временная зона. Моя например Asia/Yekaterinburg (т.е. GMT + 5:00). Правильно написать свою тайм-зону вам поможет эта страница.
countto = - Время Х, т.е. время, когда наступит наше знаменательное событие в формате ГГГГ-ММ-ДД ЧЧ:ММ:СС
Параметр do=t&data может принимать 2 значения:
do=t&data= - Текст, который будет написан вместо таймера по наступлению часа Х
do=r&data=
Когда наступит час X, отправим посетителя на какую-нибудь страницу, например : http://ruseller.com

Ну и, конечно, CSS

#cd {
margin: auto;
height: 50px;
width: 450px;
font-family: "Courier New", Courier, mono;
font-size: 24pt;
color: #000;
text-align: center;
font-weight: bold;
background-image: url(back.jpg);
vertical-align: middle;
}

Добавляем этот код в свой css - файл, либо прописываем на странице между тегами <head></head>. Код довольно простой, можете без труда создать что-то свое.

Вот и все. Удачи!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.minisitegallery.com/blog
Перевел: Евгений Стыценков
Урок создан: 24 Апреля 2009
Просмотров: 141629
Правила перепечатки


5 последних уроков рубрики "PHP"

  • Фильтрация данных с помощью zend-filter

    Когда речь идёт о безопасности веб-сайта, то фраза "фильтруйте всё, экранируйте всё" всегда будет актуальна. Сегодня поговорим о фильтрации данных.

  • Контекстное экранирование с помощью zend-escaper

    Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

  • Подключение Zend модулей к Expressive

    Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

  • Совет: отправка информации в Google Analytics через API

    Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

  • Подборка PHP песочниц

    Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 24 Апреля 2009 14:47
    Андрей
    Хоршая вещь!!! Будем отсчитывать время до Нового Года!!! А можно сделать так чтобы часовой пояс автоматически определялся для Российских и Украинских посетителей??? А то просто получиться нестыковка(((
    • 18 Января 2011 17:00
      eko24ive
      Да посмотри свойства функции date()
  • 24 Апреля 2009 16:01
    dima
    вот теперь знаю, что до НГ осталось 251 день! ))) хы)
  • 24 Апреля 2009 16:09
    Аббат_Кальне
    о спс спс спс давно искал )))
  • 24 Апреля 2009 17:18
    Святослав
    2077 дней запас на 5 лет)))
  • 24 Апреля 2009 17:26
    DimaNovik
    СПАСИБО ВАМ ОГРОМНОЕЕЕЕЕЕ!!! Только вчера меня попросили поставить таймер на сайт. Облазил все. А тут захожу к Вам на сайт и о чудо!!! СПАСИБО!!!
  • 25 Апреля 2009 20:09
    Cheiz
    Скажите, атаймер не пойдет в минус после часа Х ? :)
  • 25 Апреля 2009 20:20
    yaЕвген
    Cheiz, нет
  • 7 Мая 2009 00:18
    Сергей
    У меня вместо слова "дней" на сайте выводится: "PrPSPuP№" (всё остальное работает нормально). Несколько раз, следуя уроку, переделывал, но не могу понять в чём дело. Жду вашей подсказки!!!
  • 7 Мая 2009 16:27
    Сергей
    Не работает. Проблема та же... Слово "ДНЕЙ" на тарабарском языке!!!
    • 18 Января 2011 17:01
      eko24ive
      Делай через JS.
  • 11 Мая 2009 03:00
    Сергей
    Хотелось бы получить ответ, а его всё нет... Проблема та же.
  • 7 Июня 2009 16:00
    JackBV
    У вас скорее всего проблемма с кодировкой
  • 17 Июня 2009 13:15
    sekundant
    [quote]У меня вместо слова "дней" на сайте выводится: "PrPSPuP№" (всё остальное работает нормально). Несколько раз, следуя уроку, переделывал, но не могу понять в чём дело. Жду вашей подсказки!!![/quote] честно говоря тоже ломал голову над этой проблемой но потом по совету JackBV сменил кодировку с UTF-8 на ANSI и все работает отлично!!! Спасибо автору!!! Отличный сайт!!! Особая благодарность Е. Попову отличные уроки!!!
  • 21 Июня 2009 17:25
    HUTPO
    Народ помогите плиииз, кто сможет. Надо чтобы в этом шаблоне выводило ещё и милисекунды. Оч надо, весь инет перерыл но нигде нету такого скрипта который выводил бы и дату и время да и ещё в милисекундах. Везде скрипты только которые выводят либо ЧЧ-ММ-СС либо ГГГГ-ММ-ДД. А с милисекундами нету! Помогите!
  • 21 Июня 2009 17:26
    HUTPO
    тобишь чтобы было только на конце с милисекундами. Например: 2019 дней 17:32:16.56 Где 56 это милисекунды
  • 17 Июля 2009 11:47
    Стефан
    Да, хороший скрипт)) Буду использовать на своём сайте. Спасибо за уроки!
  • 8 Августа 2009 22:26
    Rus
    а размножить этот таймер можно, чтобы их было несколько на странице и каждый показывал свое отдельное время?
  • 19 Сентября 2009 22:17
    hripun
    подскажите плиз как убрать дату что бы остались только часы,минуты и секунды ?????
  • 22 Сентября 2009 16:55
    zura
    а можно как то с помощью php выводить данные в цикле как тут время, без перезагрузки страницы?
  • 4 Февраля 2010 21:16
    Дит
    Здесь ещё есть кто живой?*? столько вопросов накопилось и отаетов нет?*?
  • 4 Февраля 2010 21:48
    Дит
    Сорри за тупизм, но у меня вообще не отображается эта фишка :((( может кто помочь?*? Опыта у меня в этом деле - кто наплакал !!!...
  • 9 Февраля 2010 20:41
    Денисов
    > у меня вообще не отображается эта фишка :((( может кто помочь? Убедитесь что у вас стоит php-расширение (т.е. index.php). > У меня вместо слова "дней" на сайте выводится: "PrPSPuP№" надо сменить кодировку файла countdown.php с UTF-8 на ANSI
    • 27 Июня 2013 12:18
      LinuX_UseR
      php тут ни причём, вон я в html запёр и работает всё, просто тестить надо на хосте что бы всё нормально отоброжалось)
  • 2 Апреля 2010 06:24
    Игорь
    А как заствавить его работать в Internet Explorer ?
  • 5 Апреля 2010 14:05
    Letnab
    что то у меня с кодировкой не так.Показывает одни карокозябры. я уже и ANSI ставил,непомогает((
  • 15 Июня 2010 22:20
    njuha
    Ответы на вопросы: -Скажите, атаймер не пойдет в минус после часа Х ? *Нет, не пойдёт будет или пустое место или то что вы напишите в функцыи do=t&data= ! -У меня вместо слова "дней" на сайте выводится: "PrPSPuP№" (всё остальное работает нормально). Несколько раз, следуя уроку, переделывал, но не могу понять в чём дело. Жду вашей подсказки!!! * Problema w koderowke нужно сменить кодировку файла countdown.php с UTF-8 на ANSI или на вашей странице поставить UTF-8 НО некоторые браузеры всё равно выводят "PrPSPuP№", типа IE старых версий! -Народ помогите плиииз, кто сможет. Надо чтобы в этом шаблоне выводило ещё и милисекунды. Оч надо, весь инет перерыл но нигде нету такого скрипта который выводил бы и дату и время да и ещё в милисекундах. Везде скрипты только которые выводят либо ЧЧ-ММ-СС либо ГГГГ-ММ-ДД. А с милисекундами нету! Помогите! *Технически это сделать можно! Но нужно переделывать файл countdown.php! Если очень надо то пиши njuhaandrej@mail.ru!
  • 15 Июня 2010 22:21
    njuha
    -а можно как то с помощью php выводить данные в цикле как тут время, без перезагрузки страницы? *Да можно, но это сложно! Есть решения и по проще! -подскажите плиз как убрать дату что бы остались только часы,минуты и секунды ????? *В файле countdown.php нужно убрать if (hh > 23) { dd = hh / 24; dd = parseInt(dd); hh = hh - (dd * 24); } else { dd = 0; } и оставить только dd = 0; ! -а размножить этот таймер можно, чтобы их было несколько на странице и каждый показывал свое отдельное время? *Да можно без проблем, вставляй скрипт втом месте де тебе нужно и всё!
  • 22 Июня 2010 16:35
    Алексей
    Таймер офигительный! Ковырялся целый день, и настроил его на свой лад. Но проблема: IE6 не работает!!! Виснет на этом: document.getElementById('cd').innerHTML = convert_to_time(countdown); Может кто-нибудь знает решение проблемы?
  • 2 Августа 2010 21:07
    erik
    Есть сайт с которого качают mp3. Мне бы хотлеось чтоб юзер при нажатии ссылки скачать в другом окне открывалась страница с рекламным сайтом. И навреху окна браузера появлялся счетчик. Пока счетчик тикает юзер ждал ссылку откуда скачать mp3. НУ вы меня поняла о чем речь. Мне бы такой скрипт таймера. Если можете помогите плииз
    • 18 Января 2011 17:06
      eko24ive
      в home
  • 22 Октября 2010 17:35
    Данила
    что то я не пойму, а куда остальные файлы засунуть то?
  • 22 Декабря 2010 17:09
    Demeus
    А как вывести n-ое количество таймеров на странице?
    • 18 Января 2011 17:07
      eko24ive
      copy-paste
      • 19 Января 2011 18:47
        Demeus
        а ты попробуй copy-paste
        • 23 Января 2011 11:35
          eko24ive
          я-ж так и делал
  • 6 Февраля 2011 13:59
    kksw
    Люди помогите ! таймер не хочет размножаться нужно на странице выводить несколько таймеров с разным временем, срабатывает только один первый,причем по самому позднему времени остальных не видно. Перепробовал все возможные варианты. Еще вопрос в догонку, сколько должно быть файлов countdown.php если на пример таймеров на странице 3 и где он должен лежать. Еще этот таймер не встает в строчку все время наровит перейти на новую строку. Подскажите может есть еще что то подобное, нужно что бы было: ...до начала осталось - 15 20 12 ...до начала осталось - 20 32 27 и т.д. в конце писалось: началось время показывало всем одинаково вне зависимости от часового пояса
    • 8 Июля 2011 16:14
      EvgeniST
      тоже очень нужно!!!
    • 3 Мая 2015 04:38
      dim246
      Для размножения таймеров с выводом разного времени потребуется два файла countdown.php с разными именами, допустим второй файл будет с называться countdowns.php. Во втором файле countdowns.php найти все слова countdown и заменить на countdowns, также найти cd и заменить на cds. В этой строке <SCRIPT language="JavaScript" SRC="countdown.php?timezone=Asia/Yekaterinburg&countto=2015-01-01 12:00:00&do=r&data=http://ruseller.com"></SCRIPT> заменить SRC="countdown.php на SRC="countdowns.php. Второй таймер готов.
  • 4 Марта 2011 21:42
    Dim565 Dim565
    А как размножить таймер? Пробовал создавать 2 файла php, во втором другой див - не работает!
    • 28 Марта 2012 09:31
      Татьяна Лаздовская
      таймер может быть размножен сколько угодно раз, но отобразится он только в 1 месте на странице, т.к. вы обращаетесь к элементу по id (который в свое время единственный на странице). Выхода я могу придумать 2: изменять это
      document.getElementById('cd')
      или динамически добавлять какую-нибудь приписку к названию идентификатора CD
  • 6 Июня 2011 09:21
    donik
    Здрасьте всем! Большое спасибо автору за дельную информацию об организации countdown таймера. Скачал исходники, ознакомился с процессом установки, залил файлы на локальный сервер (DENWER) - результат - 100% (таймер отсчитывает). Проделываю то же на удалённом сервере (хостинг от plesk) - выводится на экран только сообщение "До ЧАСА X осталось "... Т.е. ни фона (back.jpg), ни работы таймера не наблюдается. Сравниваю исходный текст страницы автора (http://ruseller.com/lessons/les167/index.html) и исх. код моей страницы - разницы никакой! Так в чём проблема?
    • 20 Июня 2011 21:36
      SergeyGKB
      Скорей всего не залил файлы back.jpg и countdown на удаленный сервер. Я сам часто забываю это делать и вспоминаю только когда захожу на сайт.
  • 28 Июня 2011 20:17
    elena_sh
    Прошу прощения. Для особо одаренных, можно чуть подробнее технологию установки таймера? Буду очень признательна. Начиная с того, что я скачала исходники. Что дальше? Не блондинка, постараюсь задавать глупых вопросов по-меньше :-) Спасибо!
  • 4 Июля 2011 11:51
    qamal
    Здравствуйте, скачал иходники, залил на хостинг, но ничего кроме как До ЧАСА X осталось Ничего нет... Почему ???
  • 10 Августа 2011 12:49
    Sogela
    Вопрос снят.
  • 10 Августа 2011 14:57
    Sogela
    Скажите пожалуйста, а этот скрипт подойдет для отсчета 30 мин, за которые посетитель страницы должен сделать покупку со скидкой? Каждому посетителю страницы должны отсчитываться только 30 мин и все, скидка закончилась. Что переделать в скрипте? или это другой скрипт?
    • 26 Октября 2011 23:49
      tlustenko
      РЕБЯТА! А знаете в чём заключается самая прелесть этого таймера??? ))) ТО, что он НЕ ЗАВИСИТ от времени на компьютере пользователя! ВСЕ скрипты, которые я находил зависели от времени, которое у меня установлено на компе. Т.е. меняешь дату, другой месяц или время - и таймер на сайте тоже сразу переключался. А этот таймер НЕ переключается!!! УРА УРА УРА!! :)
  • 4 Ноября 2011 21:22
    stops2012
    Ребят, никто не знает как можно, чтобы по истечении времени таймер не перенаправлял и не выписывался что-то, а уничтожался полностью? Попробовал сделать вот так
    <SCRIPT language="JavaScript" SRC="countdown.php?timezone=Asia/Yekaterinburg&countto=2015-01-01 12:00:00&do=delete"></SCRIPT>
    Таймер по истечении времени пропадает, но изображение back.jpg, то есть фон остается! Как можно сделать, чтобы и он пропадал? Очень нужна помощь, помогите пожалуйста..
  • 7 Марта 2012 00:54
    joe1989
    подскажите, а как его запихнуть на страницу wordpress?
  • 11 Мая 2012 23:21
    Тема7
    А можно не таймер, а секундомер поставить? что бы считало например сколько сайту лет...
  • 22 Мая 2012 01:24
    djonA
    Подскажите все таки как размножить данный скрипт. Хочу на 1 странице вывести 2 не зависимых обратных отсчета. Скажем один до завтра второй до после завтра. Просьба подсказать
  • 11 Июля 2012 19:55
    ewgenij05
    у меня возникла проблема показывает только "До ЧАСА X осталось" в самом исходнике,(как скачал) ничего не менял. Что это может быть?
  • 17 Августа 2012 23:31
    Kanaletto
    ewgenij05 у меня та же проблема. В чем дело?
  • 25 Октября 2012 08:16
    saifuddin
    Как сделать, так чтобы по окончанию времени, он заново начал отчет. Нужно, чтобы каждый день шел отчет с начальным таймером 24 часа.
  • 18 Января 2013 01:04
    danya24rus
    Здравствуйте, скажите пожалуйста как сделать так, чтобы сайт, куда перенаправляет скрипт открывался в новом окне?
  • 18 Января 2013 03:22
    danya24rus
    windows.open, разобрался)
  • 21 Февраля 2013 13:29
    werd_34
    Поставил на локальный сервер - всё отлично, с кодировкой разобрался. Перенёс на хостинг - таймер не отображается. Кстати, в исходниках действительно не отображается таймер. Все файлы залил, пути прописал правильно. Использую Opera. В чём может быть дело?
  • 26 Марта 2013 20:22
    beauty
    А можно сделать чтобы вместо времени, вводимого вручную (countto=2015-01-01 12:00:00), оно выводилось из базы?
  • 24 Апреля 2013 18:42
    nvamillion
    Установил! На денвере все отлично работает! Перенес на хостинг, считает что время Х закончилось! Естественно выводит заложенную запись. Где смотреть не знаю, подскажите пожалуйста!
  • 25 Апреля 2013 20:43
    Alexander_Muromtsev
    Всем привет. Господа, подскажите, пожалуйста: таймер 120 секунд после открытия страницы? Человек уже задавал такой вопрос с таймером 30 минут для скидки. У меня похожий вопрос, только 120 секунд. Соответственно открыл новую страницу и на ней таймер 120 секунд. Возможно и в другую сторону. Открыл страницу и начался отсчет секунд. Обновил страницу и отсчет начался с начала. Просмотрел почти весь сайт, нашел только таймеры от или до определенного времени. Подскажите, кто знает. Заранее благодарен С Уважением Александр.
  • 20 Июля 2013 13:34
    master_z1zzz
    А где поменять время? У меня вообще написано "До ЧАСА X осталось" и всё!
  • 25 Июля 2013 17:16
    WorldFace
    Народ а почему у меня с начало все работало а потом перестал работать ?!
  • 26 Июля 2013 15:50
    master_z1zzz
    Не спрашивайте тут ничего, всёравно вам никто не ответит. Автор пропал безвисти...
  • 26 Ноября 2013 19:51
    svetlana2305
    поставила несколько таймеров на одну страницу. но проблема в том, что визуальный отсчет отображается только на последнем таймере, на остальных застывшее время. при обновлении страницы застывшее время меняется на фактическое. как сделать чтобы на всех визуальное измение времени было, т.е. чтобы было видно, что секунды и минуты меняются?
  • 27 Ноября 2013 03:14
    anton380
    НАЙДЕНО РЕШЕНИЕ ПРОБЛЕМЫ! Для тех, у кого таймер работает на локальном сервере и не отображается на хостинге. в файле скрипта в 7-й строке меняем слово "putenv" на "date_default_timezone_set", И всё начинает работать. У меня суть проблемы свелась к тому, что на хостинге (yutex) запрещена функция "putenv", что отображалось в логах..
  • 27 Декабря 2013 02:34
    Нил Пономарев
    Отличный скрипт. Спасибо!!!
  • 30 Марта 2014 19:02
    Stranger1979
    Еще одна неплохая реализация таймера обратного отсчета. Можно скачать бесплатно: http://presentyou.ru
  • 4 Апреля 2014 14:27
    svoshkin
    Народ всем привет !!! Все настроил работает отлично. Хочу убрать из таймера отсчет времени и оставить только дни, кто шарит в php помогите подправить этот скрипт. Очень нужно, жду ответа
  • 8 Апреля 2014 12:08
    svoshkin
    Помогите очень нужно!
  • 12 Июня 2014 15:10
    Alexander_Muromtsev
    Всем привет. Если кому интересно, вот код простого секундомера. Таймер отсчитывает проведенное время на странице. В любом месте на странице вставляем
    <div id="tm1">0</div>
    и сам код js
    <script>	var t=setInterval("tm()",1000);	var xt2=0;	var xt3=0;	function tm() {	xt2++;	if(xt2>59) {	xt3++;	xt2=0;	}	if(xt2>9) {	xt=xt2;	} else {	xt="0"+xt2;	}	document.getElementById("tm1").innerHTML=xt3+": "+xt+"";	}	function tm2() {	document.getElementById("tm2").innerHTML+=document.getElementById("tm1").innerHTML+" | ";	xt++;	}
    </script>
  • 10 Октября 2014 21:18
    giv1302
    Вот тут неплохо реализован онлайн генератор таймера обратного отсчета для сайта - http://e-timer.ru/
  • 31 Июля 2015 18:02
    Dreamscapes33
    я в код добавил проверку падежей и подстановку переменной (дней, дня, день) в файл countdown.php для одного месяца:
    $days_befor_ending=" дней ";
    if ((dd==3)|(dd==4)|(dd==2)|(dd==24)|(dd==23)|(dd==22)) { $days_befor_ending=" дня ";}
    if ((dd==31)|(dd==21)) { $days_befor_ending=" день ";}
    if (dd > 1) { return (dd+$days_befor_ending+hh+":"+mm+":"+ss); }
    
    последнюю строчку вместо 152ой, а остальные, соответственно, выше вставить
  • 3 Февраля 2016 16:36
    lelik_keo
    Здравствуйте! у меня такой вопрос: я на своём сайте организовал личный кабинет (пример брал от сюда: http://ruseller.com/lessons.php?id=369&rub=37), теперь я хочу сделать, чтобы у пользователя тикал таймер, пример скачал от сюда: http://ruseller.com/lessons.php?id=167&rub=36 подскажите пожалуйста, как настроить привязку к каждому пользователю (я так понимаю необходимо привязаться к таблице users в MySQL) и можно ли сделать что на определенной вкладке таймер тикает, а на определенной останавливается? у самого опыта в php, MySQL и пр. очень мало((( Буду очень благодарен за помощь))))
  • 15 Апреля 2016 06:53
    in_tregubov
    Всем привет. Скрипт успешно работал несколько лет, пока у нас не появился новый часовой пояс Ижевск/Самара. Раньше мы были Москва. Раньше в настройках у меня стояло Europe/Moscow и таймер начал обманывать на 1 час, оно и логично. Поменял часовой пояс на Europe/Samara и все заработало. Вчера заметил, что опять промахивается на 1 час в большую сторону, начал играться с часовыми поясами и понял, что скрипт на часовой пояс вообще не реагирует, хоть какой поставить, время все равно не меняется. Кто, что может подсказать?
^ Наверх ^