Php обратный отсчет времени

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

Доброго времени суток! Как Вы, наверное, уже знаете, я часто провожу распродажи моих видеокурсов. На странице распродажи есть таймер обратного счета на PHP, который информирует посетителей сколько времени осталось до окончания распродажи.И вот его примерную реализацию я Вам сегодня и покажу.

$endOfDiscount = mktime(23,59,0,3,26,2020); // дата окончания распродажи
$now = time(); // текущее время
$secondsRemaining = $endOfDiscount — $now; // оставшееся время

define(‘SECONDS_PER_MINUTE’, 60); // секунд в минуте
define(‘SECONDS_PER_HOUR’, 3600); // секунд в часу
define(‘SECONDS_PER_DAY’, 86400); // секунд в дне

$daysRemaining = floor($secondsRemaining / SECONDS_PER_DAY); //дни, до даты
$secondsRemaining -= ($daysRemaining * SECONDS_PER_DAY); //обновляем переменную

$hoursRemaining = floor($secondsRemaining / SECONDS_PER_HOUR); // часы до даты
$secondsRemaining -= ($hoursRemaining * SECONDS_PER_HOUR); //обновляем переменную

$minutesRemaining = floor($secondsRemaining / SECONDS_PER_MINUTE); //минуты до даты
$secondsRemaining -= ($minutesRemaining * SECONDS_PER_MINUTE); //обновляем переменную

echo(«

До окончания распродажи осталось $daysRemaining дней, $hoursRemaining часов, $minutesRemaining минут, $secondsRemaining секунда

«); //печатаем сообщение

Создано 24.03.2020 13:30:22

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.

Источник

Таймер обратного отсчета для сайта на PHP+Javascript

Говоря о таймере обратного отсчета следует учесть тот факт, что таймеры делятся на два вида, точнее сказать, их употребление бывает разное. В одном случае счетчику задается конечная дата, в другом же задается количество времени, отсчет ведется для каждого пользователя отдельно (этот вариант подходит для тех, кто проводит какие-то акции или скидки).

1. HTML

Для разметки построим контейнер блоков, каждый элемент которого будет отвечать за определенную часть времени, то есть секунды, минуты, часы, дни и недели.

 
недель: 00
 
дней: 00
 
часов: 00
 
минут: 00
 
секунд: 00
 

2. CSS

Все вложенные блоки сделаем невидимыми и показывать будем только те, которые включены в настройках.

Сначала подключим свой шрифт с Google Fonts:

@import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic);

Задаем стандартные параметры для документа:

Остается написать классы для самого счетчика. Блок с таймером выровняем по центру и укажем auto-размер. Точные размеры будем задавать с помощью скрипта.

#countdown < margin:0px auto; width:auto; padding:20px 20px 20px 10px; position:relative; border:#222 2px solid; background:#eee; >#countdown div < margin:0px 0px 0px 10px; float:left; width:88px; >#countdown div span < display:block; height:53px; background:#000; border-bottom:#f00 1px solid; color:#eee; font-size: 24pt; padding-top: 4px; padding-left: 16px; letter-spacing: 31px; /* Последние 4 параметра отвечают за размер текста и его выравнивание на циферблате */ >#countdown #week,#countdown #day,#countdown #hour,#countdown #minute,#countdown #second < display:none; >.clear

3. PHP

Как и говорилось ранее, в таймере предусмотрим два варианта, это отсчет времени к определенной дате (например, 1 мая 2018 года) и таймер по заданному времени (например, 12 часов). Этот выбор мы сделаем в настройках скрипта.

$countdown_setting = array( "type" => "date", /* date или time, date - отсчет до указанной даты, time - отсчет указанного времени */ "cookie" => true, /* true или false, запоминать время, только для режима time */ "position" => "vertical", /* horizontal или vertical, положение блока */ "date" => array( "year" => 2014, "month" => 4, "day" => 15, "hour" => 12, "minute" => 0, "second" => 0 ), /* указывается конечная дата, для режима date */ "time" => array( "week" => 0, "day" => 2, "hour" => 10, "minute" => 0, "second" => 0 ), /* указывается время, для режима time */ "visible" => array( "week" => array("none","недель:"), "day" => array("block","дней:"), "hour" => array("block","часов:"), "minute" => array("block","минут:"), "second" => array("block","секунд:") ) /* настройка отображения блоков, block - показывать соответствующий блок, none - не показывать; второй параметр - заголовок блока */ );

Поскольку видимость блоков (дни, минуты и т.д.) задается в конфиге, необходимо сделать генерацию html-кода:

$script = ''; $countdown_txt = ''; $block_count = 0; /* Генерация html кода таймера */ foreach($countdown_setting['visible'] AS $i => $v) < $countdown_txt .= '
'.$v[1].' 00
'; $script .= ''; if($v[0] == 'block') $block++; > if($countdown_setting['position'] == 'vertical') $block = 1; $script .= '';

Обработку времени будем делать на PHP с учетом серверного времени, чтобы время не зависело от настроек времени конечного пользователя, как это бывает при использовании Javascript:

/* обработка, когда указано время отсчета */ if($countdown_setting['type'] == 'time') < $time_value = $countdown_setting['time']['week']*7*60*60*24+$countdown_setting['time']['day']*60*60*24+$countdown_setting['time']['hour']*60*60+$countdown_setting['time']['minute']*60+$countdown_setting['time']['second']; $time_new = $time+$time_value; /* обработка кукисов */ if($countdown_setting['cookie']) < $time_cookie = (int) $_COOKIE['time']; if($time_cookie==0) < setcookie("time",$time_new); >else < $time_value = $time_cookie-$time; >> $script .= ''; > elseif ($countdown_setting['type'] == 'date') < /* обработка, когда указана конечная дата */ $time_value = mktime($countdown_setting['date']['hour'],$countdown_setting['date']['minute'],$countdown_setting['date']['second'],$countdown_setting['date']['month'],$countdown_setting['date']['day'],$countdown_setting['date']['year']); $time_value = $time_value-$time; $script .= ''; >

4. Javascript

Первое что нам необходимо, это подключить фреймворк jQuery (о способах подключения можно почитать здесь)

Опишем функцию countdown_go(), она будет отвечать за вывод времени в блоки. При знаниях JS, функцию можно оптимизировать.

function countdown_go() < timeleft_func = timeleft; if(countdown_week=='block') < timevalue = Math.floor(timeleft_func/(7*24*60*60)); timeleft_func -= timevalue*7*24*60*60; if(timevalue<10) timevalue = '0'+timevalue; $("#week span").html(timevalue); >if(countdown_day=='block') < timevalue = Math.floor(timeleft_func/(24*60*60)); timeleft_func -= timevalue*24*60*60; if(timevalue<10) timevalue = '0'+timevalue; $("#day span").html(timevalue); >if(countdown_hour=='block') < timevalue = Math.floor(timeleft_func/(60*60)); timeleft_func -= timevalue*60*60; if(timevalue<10) timevalue = '0'+timevalue; $("#hour span").html(timevalue); >if(countdown_minute=='block') < timevalue = Math.floor(timeleft_func/(60)); timeleft_func -= timevalue*60; if(timevalue<10) timevalue = '0'+timevalue; $("#minute span").html(timevalue); >if(countdown_second=='block') < timevalue = Math.floor(timeleft_func/1); timeleft_func -= timevalue*1; if(timevalue<10) timevalue = '0'+timevalue; $("#second span").html(timevalue); >timeleft-=1; return false; >

Последнее, что осталось, это запустить таймер, здесь используем стандартную функцию setInterval().

Как установить на сайт?

Если вы не хотите разбираться и устанавливать, можете просто скачать исходники, создать на сайте папку countdown и залить туда файлы. А далее на сайт вставить через фрейм:

Советую обратить внимание на более усовершенствованный, бесплатный таймер с админпанелью и видеоинструкцией, скачать можно здесь.

Вот и все, остались вопросы — задаем в комментариях.

Источник

Объективный таймер обратного отсчёта на PHP

Недавно мы разобрались с тем, как можно показывать новые данные на странице без перезагрузки, а до этого — как использовать PHP-скрипты. Сегодня объединим это в один проект и сделаем таймер обратного отсчёта на PHP.

В чём идея

Допустим, у нас есть какое-то событие, которое заканчивается 16 октября 2022 года в 14:00 — например распродажа. Нам нужно вывести таймер на страницу, который будет отсчитывать время до этого события.

При этом нам важно, чтобы отсчёт не зависел от пользователя: например, если он переставит дату на календаре своего компьютера на 1 сентября, то чтобы у него не появилось 9 дополнительных дней распродажи. Поэтому мы не можем использовать дату и время с компьютера пользователя, нам нужно брать их с сервера.

Получается, что алгоритм будет работать так:

• берём дату с сервера;
• берём время с сервера;
• находим разницу с искомой датой (16 октября 2022) и показываем, сколько времени осталось до наступления события;
• если дата уже прошла, сообщаем об этом (отложим на другую итерацию, потому что событие только через год).

Раз у нас дата лежит на сервере, то и отдавать мы будем её при помощи PHP-скрипта. Но раз сервер всё равно нам что-то отдаёт, то пусть это сразу будет готовый таймер с текстом, а мы его встроим на страницу. Это значит, что нам нужен такой скрипт, который просто будет постоянно через PHP получать с сервера данные и отправлять их в нужное место на странице.

Что понадобится

Единственное, что нам нужно от сервера, — чтобы он мог выполнять PHP-скрипты. Это умеет делать практически любой веб-сервер в интернете, поэтому, если у вас есть хостинг и на хостинге можно размещать сайты, — скрипт тоже будет там работать.

Если хостинга с сайтом нет, то можно сделать так: установить MAMP и получить рабочий сервер с PHP у себя на компьютере.

Добавляем на странице место для таймера

Так как всю работу будут делать скрипты, то нам нужно просто указать место на странице, куда отправить результат. Возьмём наш учебный сайт mihailmaximov.ru и перед разделом с контактами добавим блок для таймера:

Этого будет достаточно, чтобы скрипт показал таймер в выбранном месте.

Пишем скрипт на странице

Первым делом подключаем jQuery — это позволит нам работать с AJAX-скриптом и вызывать его самым простым способом.

Теперь в раздел добавляем простой скрипт на JavaScript. Его задача — периодически обращаться к серверу и обновлять данные на странице. Благодаря AJAX он сможет это делать без перезагрузки, работая с отдельным блоком:

Готовим PHP-скрипт

Мы уже работали с PHP-скриптами, когда делали форму обратной связи, и там же рассказывали, как загрузить этот скрипт на сервер. Если пропустили этот цикл — будет полезно:

Источник

Обратный отсчет времени на PHP

Всем большущий привет!
Хочу предложить для вас небольшой скрипт на PHP, предназначенный для обратного отсчета времени. Этот скрипт позволяет выводить оставшиеся дни, часы, минуты и секунды. Как только таймер достигнет указанного времени, появится сообщение, которое вы напишите в скрипте, например, «с Новым Годом» или «акция закончилась».
Скрипт очень удобно применять в случаях, если нужно к определенному времени отсчитывать время, например, к Новому Году, Рождеству, Дню рождения блога/сайта, время окончания акции, конкурса и т.п.

Код скрипта для отсчета времени

Скопируйте код PHP и вставьте на ваш сайт в то место, где вы хотите видеть вывод даты. Но скрипт должен быть размещен между тегами .

switch(substr($days, -2)) < case 1: $d='день'; break; case 2: case 3: case 4: $d='дня'; break; default: $d='дней'; >switch(substr($hour, -2)) < case 1: $h='час'; break; case 2: case 3: case 4: $h='часа'; break; default: $h='часов'; >switch(substr($min, -2)) < case 1: $m='минута'; break; case 2: case 3: case 4: $m='минуты'; break; default:$m='минут'; >?> 0) echo ‘До нового года ‘.$o.’:
‘; ?> 0) echo $days.’ ‘.$d; ?>, 0) echo ‘ ‘.$hour.’ ‘.$h; ?> 0) echo ‘ и ‘.$min.’ ‘.$m; ?>

Настройки скрипта.
Строка (2) – указывает число, месяц, год окончания работы таймера.

$date = strtotime(» 1 January 2014 «);

Для тех, кто не знает месяца на английском, вот весь список:
Январь – January
Февраль – February
Март – March
Апрель – April
Май – May
Июнь – June
Июль – July
Август – August
Сентябрь – September
Октябрь – October
Ноябрь – November
Декабрь – December

Строка (41) – напишите надпись, до чего осталось время. В данном примере написано так: «До Нового Года».

0) echo ‘ До нового года  ‘.$o.’:
‘; ?>

Строка (45) – напишите надпись, которая появится посетителям после остановки таймера.

Если вы владеете HTML и CSS стилем, тогда можно придать выводимым цифрам таймера и тексту оригинальный вид.
Это все!
Спасибо вам, что вы являетесь постоянными посетителями блога BlogGood.ru

Источник