Buderus-trade.ru

Теплотехника Будерус
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Счётчик обратного отчёта

Счётчик обратного отчёта

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

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

1. Сначала позаботимся о правильном склонения слов перед числами. Например, если оставшееся время — 45 дней и т.д., то счётчик на сайте и должен выдавать именно «дней», а не «дня» или «день». А если остался 21 день и т.д., то нужно писать именно «день». То же самое с часами и минутами. За это отвечает пользовательская функция correctForm. Её код приведён ниже.

Код PHP

//функция склонения слов перед числами

function correctForm($number, $suffix) <

$keys = array (2, 0, 1, 1, 1, 2);

$mod = $number % 100;

2. Далее нам нужно получить дату окончания конкурса, отображаемого на текущей странице. Для этого пишем запрос к базе данных, где end_ — дата в формате числа и времени. Присваиваем её значение переменной $real_end. Затем получаем текущую дату и время функцией PHP date.

Код PHP

$resultT= mysql_query («select end_ FROM competitions WHERE cid=’$cid'») or die (mysql_error());

$myrowT= mysql_fetch_array ($resultT);

$dat= date («Y-m-d, H:i:s»);

3. И, собственно, сам счётчик обратного отсчёта. Два раза используем функцию PHP strtotime, которая преобразует текстовое представление даты на английском языке в метку времени Unix для текущей даты и даты окончания конкурса. Получаем разницу в секундах между датой окончания и текущей датой. Далее, используя функцию PHP floor, возвращающую ближайшее меньшее целое, вычисляем оставшиеся дни, часы и минуты. Вычисления основаны на том, что в минуте 60 секунд, в 1 часе 3600 секунд, в 1 дне 86400 секунд.

Код PHP

//вычисление оставшихся дней, часов и минут

$now_date = strtotime ($dat);

$future_date = strtotime ($real_end);

$difference_days = $future_date — $now_date;

$days = floor ($difference_days/86400);

$difference_hours = $difference_days % 86400;

$hours = floor ($difference_hours/3600);

$difference_min = $difference_hours % 3600;

$min = floor ($difference_min/60);

4. Теперь применяем пользовательскую функцию correctForm склонения слов перед числами.

Код PHP

$array1 = array («день», «дня», «дней»);

$word1 = correctForm($days, $array1);

$array2 = array («час», «часа», «часов»);

$word2 = correctForm($hours, $array2);

$array3 = array («минута», «минуты», «минут»);

$word3 = correctForm($min, $array3);

printf (‘<div ><h1>%s %s %s %s %s %s</h1>до закрытия конкурса</div>’, $days,$word1,$hours,$word2,$min,$word3);

5. И, наконец, полный код блока, реализующего счётчик обратного отсчёта. Как в случае с конкурсами, он точно так же может производит обратный отсчёт для акций на те или иные товары на сайте-каталоге или любой другой отсчёт времени, оставшегося до какого-либо «часа Ч».

Код PHP

//функция склонения слов перед числами

function correctForm($number, $suffix) <

$keys = array (2, 0, 1, 1, 1, 2);

$mod = $number % 100;

$resultT= mysql_query («select end_ FROM competitions WHERE cid=’$cid'») or die (mysql_error());

$myrowT= mysql_fetch_array ($resultT);

$dat= date («Y-m-d, H:i:s»);

//вычисление оставшихся дней, часов и минут

$now_date = strtotime ($dat);

$future_date = strtotime ($real_end);

$difference_days = $future_date — $now_date;

$days = floor ($difference_days/86400);

$difference_hours = $difference_days % 86400;

$hours = floor ($difference_hours/3600);

$difference_min = $difference_hours % 3600;

$min = floor ($difference_min/60);

$array1 = array («день», «дня», «дней»);

$word1 = correctForm($days, $array1);

$array2 = array («час», «часа», «часов»);

$word2 = correctForm($hours, $array2);

$array3 = array («минута», «минуты», «минут»);

$word3 = correctForm($min, $array3);

printf (‘<div ><h1>%s %s %s %s %s %s</h1>до закрытия конкурса</div>’, $days,$word1,$hours,$word2,$min,$word3);

Php обратный отсчет времени с секундами. Таймер обратного отсчета, построенный на PHP и jQuery? Подготовьте ваши часы для отображения

Бывает, что вам для чего-то нужен таймер обратного отсчета , в интернете есть много решений, однако они либо очень громоздкие, либо имеют зависимости от других библиотек. Сегодня мы рассмотрим, как сделать таймер обратного отсчета на javascript в 18 строк кода .

  • Высчитайте оставшееся время
Читайте так же:
Чай вдвоем счетчик от нуля

Установите правильную дату окончания

Во-первых, вам нужно установить правильную дату окончания. Это будет строка в любом из форматов, которые понимает Date.parse() метод. К примеру:

Var deadline = «2015-12-31»;

Var deadline = «31/12/2015»;

Или длинный формат

Var deadline = «December 31 2015»;

Каждый из этих форматов позволяет вам установить точное время(в часах, минутах, секундах) и временную зону. Например:

Var deadline = «December 31 2015 23:59:59 GMT+02:00»;

Высчитайте оставшееся время

Function getTimeRemaining(endtime) <
var t = Date.parse(endtime) — Date.parse(new Date());
var seconds = Math.floor((t/1000) % 60);
var minutes = Math.floor((t/1000/60) % 60);
var hours = Math.floor((t/(1000*60*60)) % 24);
var days = Math.floor(t/(1000*60*60*24));
return <
«total»: t,
«days»: days,
«hours»: hours,
«minutes»: minutes,
«seconds»: seconds
>;
>

Для начала мы создаем переменную t , чтобы хранить оставшееся время. Date.parse() метод встроен в javascript и позволяет сконвертировать строку со временем в значение в миллисекундах. Это позволит нам вычитать одно время от другого и получать разницу между ними.

Var t = Date.parse(endtime) — Date.parse(new Date());

Приведите дату к удобному формату

Теперь мы хотим перевести миллисекунды в дни, часы, минуты и секунды. Давайте использовать секунды как пример:

Var seconds = Math.floor((t/1000) % 60);

Разберемся, что здесь происходит.

  • Делим миллисекунды на 1000, чтобы перевести их в секунды
  • Делим общее число секунд на 60 и сохраняем остаток — вам не нужны все секунды, только те, что остались после того, как минуты были подсчитаны
  • Округлите вниз до ближайшего целого значения, потому что вам нужны полные секунды, а не их фракции

Повторите эту логику, чтобы сконвертировать миллисекунды в минуты, часы и дни.

Выведите данные таймера, как многоразовый объект

Когда часы, минуты и секунды готовы, нам нужно вернуть их как многоразовый объект.

Return <
«total»: t,
«days»: days,
«hours»: hours,
«minutes»: minutes,
«seconds»: seconds
>;

Этот объект позволяет вам вызывать вашу функцию и получать любое из вычисленных значений. Вот пример, как вы можете получить оставшиеся минуты:

Отобразите часы на странице и остановите их, когда они достигнут нуля

Сейчас у нас есть функция, которая возвращает нам оставшиеся дни, часы, минуты и секунды. Мы можем строить наш таймер. Во-первых, создайте следующую html структуру для часов:

Затем напишите функцию, которая будет отображать данные внутри нашего div»а :

Function initializeClock(id, endtime) <
var clock = document.getElementById(id);
var timeinterval = setInterval(function()<

» +
«hours: «+ t.hours + «
» +
«minutes: » + t.minutes + «
» +
«seconds: » + t.seconds;

Эта функция принимает два параметра: id элемента, который будет содержать наши часы, и конечное время счетчика. Внутри функции мы объявим переменную clock и будем использовать ее, чтобы хранить ссылку на наш блок с часами, так что нам не нужно запрашивать DOM .

  • Высчитывать оставшееся время
  • Выводить оставшееся время в наш div
  • Если оставшееся время = 0, останавливать часы

Единственное, что осталось, запустить часы следующим образом:

Поздравляю! Теперь у вас есть простой таймер обратного отсчета всего в 18 строк javascript кода .

Подготовьте ваши часы для отображения

До стилизации нам будет нужно немного усовершенствовать некоторые вещи.

  • Убрать начальную задержку, чтобы таймер показывался незамедлительно
  • Сделать скрипт часов более эффективным, чтобы не приходилось непрерывно перестраивать все часы
  • Добавить нули по желанию

Убираем начальную задержку

В часах мы используем setInterval , чтобы обновлять отображение каждую секунду. Чаще всего это нормально, кроме начала, где присутствует 1с задержка. Чтобы это исправить, нам нужно обновлять часы один раз до того, как setInterval запускается.

Чтобы это сделать, давайте переместим анонимную функцию, которую мы передаем в setInterval (ту, которая обновляет часы каждую секунду) в собственную отдельную функцию, которую назовем updateClock . Вызовите эту функцию однажды вне setInterval и затем вызовите ее снова внутри setInterval . Таким образом, часы будут показываться без задержки.

В вашем javascript замените это:

Var timeinterval = setInterval(function()< . >,1000);

Function updateClock() <
var t = getTimeRemaining(endtime);
clock.innerHTML = «days: » + t.days + «
» +
«hours: «+ t.hours + «
» +
«minutes: » + t.minutes + «
» +
«seconds: » + t.seconds;
if(t.total clearInterval(timeinterval);
>
>

Читайте так же:
Как изобрели счетчик гейгера

UpdateClock(); // запустите функцию один раз, чтобы избежать задержки
var timeinterval = setInterval(updateClock,1000);

Делаем скрипт более эффективным

Чтобы сделать скрипт более эффективным, нам нужно обновлять не все часы, а только цифры. Для этого поместим каждое число в тег span и будем обновлять только этот контент.

Var daysSpan = clock.querySelector(«.days»);
var hoursSpan = clock.querySelector(«.hours»);
var minutesSpan = clock.querySelector(«.minutes»);
var secondsSpan = clock.querySelector(«.seconds»);

Function updateClock() <
var t = getTimeRemaining(endtime);

DaysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;

Добавляем ведущие нули

Если вам нужны ведующие нули, вы можете заменить код такого вида:

SecondsSpan.innerHTML = («0» + t.seconds).slice(-2);

Заключение

Мы рассмотрели, как сделать простой таймер обратного отсчета на javascript . Все, что вам осталось, это добавить стили. Спасибо за внимание!

Доброго времени суток всем.
Давайте попытаемся сдалать таймер на PHP
Наверное много кто задавался вопросами:
1. Сколько времени забирает мой скрипт.
2. Сколько генерируется страница (можна заметить на многих сайтах).

И так, поехали.

Давайте наш таймер создадим на ООП, тоесть в иде класса, и дадим название класса Timer:

Class Timer<>

И давайте сразу создадим конструктор класса, чтоб мы смогли как то называть данные таймера (это в большинстве нужно для оброботчиков) и также нужно создать переменную, где мы смогли хранится результаты таймеров.
Вот код, который получится:

$timeTimer = array();

Class Timer <
private $id;

$this -> > >
>

И давайте создадим сразу функции для запуска таймера, остоновки и вытаскивание текущего значения:

ClassTimer <
private $id;

/* Функция запуска таймера */
function start() <
global $timeTimer;//чтоб можна было ссылатся на глобальну переменную
$mtime = microtime();//узнаем текущие время в секундах и милисекундах

$mtime = $mtime + $mtime;
$timeTimer[$this -> id][«start»] = $mtime;//занесем результат в глобальную переменную
>

Function stop() <
global $timeTimer;
$mtime = microtime();
$mtime = explode(» «, $mtime);
$mtime = $mtime + $mtime;
$timeTimer[$this -> id][«stop»] = $mtime;
$timeTimer[$this -> id][«result»] = $mtime — $timeTimer[$this -> id][«start»];
>

Function get($rand = 5) <
global $timeTimer;
if($timeTimer[$this -> id][«result»]) return $timeTimer[$this -> id][«result»];
$mtime = microtime();
$mtime = explode(» «, $mtime);
$mtime = $mtime + $mtime;
return round($mtime — $timeTimer[$this -> id][«start»], $rand);

Function __construct($id = «») <
if(!$id)< trigger_error ("Wrong parametr input ", E_USER_WARNING); >
if($timeTimer[$id])< trigger_error ("Can not init timer", E_USER_WARNING); >
$this -> > >
>

Ну я думаю, что в самом классе как бы проблем нет ни каких. Остается только инициализировать наш таймер:

$timer = new Timer(«test»);//создаем таймер с именим «test»
$timer -> start();//запускаем таймер
$timer -> stop();//останавливаем таймер

В результате данного кода, мы получим очень маленькое значение.
Давайте попытаемся как-то загрузить систему. Можна воспользоватся циклом:

$timer = new Timer(«test»);
$timer -> start();
for($i = 0; $i get() . «
«;
>
>
$timer -> stop();
print_r($timeTimer);//Выведим наши таймера

Используя данный клас можна создавать множество таймеров, которые не будут нагружать систему.
Вот такой себе не большой скрипт таймеров. Даный класс можна также еще и спростить немного, и настроить под себя.

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

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

1. Сначала позаботимся о правильном склонения слов перед числами. Например, если оставшееся время — 45 дней и т.д., то счётчик на сайте и должен выдавать именно «дней», а не «дня» или «день». А если остался 21 день и т.д., то нужно писать именно «день». То же самое с часами и минутами. За это отвечает пользовательская функция correctForm. Её код приведён ниже.

$mod = $number % 100;

Читайте так же:
Схема подключения счетчика арбитр

$suffix_key = ($mod > 7 && $mod

2. Далее нам нужно получить дату окончания конкурса, отображаемого на текущей странице. Для этого пишем запрос к базе данных, где end_ — дата в формате числа и времени. Присваиваем её значение переменной $real_end. Затем получаем текущую дату и время функцией PHP date.

3. И, собственно, сам счётчик обратного отсчёта. Два раза используем функцию PHP strtotime, которая преобразует текстовое представление даты на английском языке в метку времени Unix для текущей даты и даты окончания конкурса. Получаем разницу в секундах между датой окончания и текущей датой. Далее, используя функцию PHP floor, возвращающую ближайшее меньшее целое, вычисляем оставшиеся дни, часы и минуты. Вычисления основаны на том, что в минуте 60 секунд, в 1 часе 3600 секунд, в 1 дне 86400 секунд.

$now_date = strtotime ($dat);

4. Теперь применяем пользовательскую функцию correctForm склонения слов перед числами.

%s %s %s %s %s %s

5. И, наконец, полный код блока, реализующего счётчик обратного отсчёта. Как в случае с конкурсами, он точно так же может производит обратный отсчёт для акций на те или иные товары на сайте-каталоге или любой другой отсчёт времени, оставшегося до какого-либо «часа Ч».

//функция склонения слов перед числами

function correctForm($number, $suffix) <

$keys = array (2, 0, 1, 1, 1, 2);

$mod = $number % 100;

$suffix_key = ($mod > 7 && $mod

$resultT=mysql_query («select end_ FROM competitions WHERE cid=»$cid»») or die (mysql_error());

//вычисление оставшихся дней, часов и минут

$now_date = strtotime ($dat);

$future_date = strtotime ($real_end);

$difference_days = $future_date — $now_date;

$days = floor ($difference_days/86400);

$difference_hours = $difference_days % 86400;

$hours = floor ($difference_hours/3600);

$difference_min = $difference_hours % 3600;

$min = floor ($difference_min/60);

$array1 = array («день», «дня», «дней»);

$word1 = correctForm($days, $array1);

$array2 = array («час», «часа», «часов»);

$word2 = correctForm($hours, $array2);

$array3 = array («минута», «минуты», «минут»);

$word3 = correctForm($min, $array3);

%s %s %s %s %s %s

Потратив последние 45 минут на поиск решения, я не могу найти легкое решение для создания таймера обратного отсчета с использованием PHP и jQuery. Большинство уже построенных скриптов, которые я нашел, основаны исключительно на jQuery, которые требуют тонны кода, и больше параметров, чем они должны, плюс, адаптивность довольно сложно.

Он чрезвычайно прост в использовании.

Все, что вам нужно сделать, это

Хорошо, я знаю, что идентификатор не является переменной, но не использует this как идентификатор. Это заставляет людей съеживаться.

В остальном не перезагружайте значение, задайте значение в JS в PHP и затем отсчитайте.

// place this in the above the code below echo «var t = » . time() . «;»; echo «var ft = » . /* your final time here */ . «;»;

// this is a helper function. function lpad(input, len, padstr) < if(!padstr) padstr = " "; // this is the normal default for pad. var ret = String(input); var dlen = ret.length - len; if(dlen >0) return ret; for(var i = 0; i = ft) < t = ft; // prevent negative time. clearInterval(intval) // cleanup when done. >var dt = new Date(ft — t); $timer.innerHTML = dt.getHours() + «:» + // pad to make sure it is always 2 digits lpad(dt.getMinutes(), 2, «0») + «:» + lpad(dt.getSeconds(), 2, «0»); >, 500) // increments of .5 seconds are more accurate > > >);

Как только php загрузил определенное время для пользователя, вы можете объяснить, почему этого недостаточно для ваших нужд:

Вы очень близки в своем исходном коде. Вот модификация вашего кода ниже, который работает, как описано, или, по крайней мере, так я думаю – я знаю, что это работает, но я не уверен, соответствует ли он вашим требованиям, они были немного неясны. Очевидно, что если вы перезагрузите страницу, вам придется полагаться на выход PHP, чтобы отличаться для того, чтобы счетчик не сбросил. Просто хочу отметить, что я не совсем уверен, почему вы используете функцию.load. Эта функция действительно просто оболочка для вызова AJAX, чтобы захватить содержимое другой страницы и вставить ее в выбранный div. Я верю, что вы ищете функцию.html (), чтобы изменить содержимое выбранного div, используя содержимое, доступное в DOM, против запроса AJAX.

Читайте так же:
По логам есть счетчику нет

Для получения дополнительной информации посетите urfusion

@epascarello ответьте на вопрос, вам нужно передать значение цикла в селекторе с идентификатором, например $ («# timer «)

Как создать страницу с обратным отсчетом времени с помощью PHP и jQuery

В этом уроке я хочу показать, как создать простую страницу с обратным отсчетом времени с использованием PHP и jQuery. Что такое страница с обратным отсчетом времени? В общем, это страница, которая информирует посетителей сайта, о том, что он находится в стадии разработки и сколько времени осталось до его запуска. На странице находится счетчик с обратным отсчетом времени и форма, для добавления почтового адреса заинтересованных посетителей. В последствие, на сохраненные адреса можно разослать сообщение об открытии сайта. В этом уроке я покажу как создать страницу похожую на эту:

Эту страницу можно легко изменить и украсить с помощью CSS. Также вы можете добавить логотип вашей компании и любые другие элементы, редактируя HTML код.

demosourse

Небольшое вступление

Архив, который вы можете скачать с сайта готов к использованию и содержит следующие файлы:

index.php – сама страница с обратным отсчетом (счетчик и форма для)
config.php – обеспечивает подключение к базе даннах
insert.php – php код для добавления почтового адреса в базу данных
js/jquery-1.3.2.min.js – jQuery framework
js/countdown.js – скрипт обратного отсчета времени

1. index.php

index.php является непосредственным интерфейсом страницы с обратным отсчетом, который содержит обратный счетчик и форму добавления почтового адреса.

Скрипт счетчика обратного отсчета времени

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

Все что вам нужно это добавить одну строчку кода между тегами <head> </head>:

Затем, в теле страницы необходимо добавить следующий код счетчика:

Чтобы установить нужную дату, необходимо заменить строку «July 6» и «0:0:00» на необходимые вам (например, 25 декабря):

В результате получается:

Если вы хотите изменить стиль счетчика, вам необходимо внести изменения в следующие классы:

В частности класс .count_down<> изменяет формат цифр счетчика, класс .count_down sup<> определяет стиль текст «days», «hours», «minutes».

jQuery и форма ввода

Отлично, счетчик создан! Следующий шаг: подключить библиотеку jQuery к нашему сайту, для чего между тегами <head> </head> следующий код:

А теперь в теле страницы добавляем следующий код простой формы с одним полем ввода:

…и добавить в это поле сообщение после того как посетитель отправит свой почтовый адрес:

… вот результат, который должен получиться после отправки сообщения:

Форма с полем ввода исчезает с помощью красивого эффекта затухания (fade-out effect), а вместо нее появляется итоговое сообщение. А теперь, в заголовок страницы (между тегами ) после кода подключения библиотеки jQuery добавляем скрипт, который позволяет добавить ajax-функциональность. Это даст нам возможность добавить e-mail посетителя в базу данных без перезагрузки страницы:

2. insert.php

Файл insert.php содержит в себе код, который сохраняет почтовый адрес посетителя в базу данных. Для примера я создал таблицу EMAIL с одним атрибутом «email». PHP код очень прост:

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: woork.blogspot.com
Перевел: Дмитрий Орлов
Урок создан: 21 Июня 2010
Просмотров: 49584
Правила перепечатки

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 сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

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

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

В чём идея

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

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

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

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

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

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

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

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

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

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

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

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

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

<script type=»text/javascript»
src=»https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js»></script>

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

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

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

голоса
Рейтинг статьи
Ссылка на основную публикацию
Adblock
detector