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

Как создать страницу с обратным отсчетом времени с помощью 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>:


<script type="text/javascript" src="js/countdown.js"></script>

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


<div id="count_down_container"></div>
<script type="text/javascript">
var currentyear = new Date().getFullYear()
var target_date = new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")
target_date.displaycountdown("days", displayCountDown)
</script>

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


new cdtime("count_down_container", "July 6, "+currentyear+" 0:0:00")

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


new cdtime("count_down_container", "December 25, "+currentyear+" 0:0:00")

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


.count_down{...}
.count_down sup{...}

В частности класс .count_down{} изменяет формат цифр счетчика, класс .count_down sup{} определяет стиль текст "days", "hours", "minutes".

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

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


<script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>

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


<form id="submit_leave_email">
<input id="input_leave_email" type="text" class="input_bg" value="Add your e-mail address"/>
<button type="submit" class="input_button">Update me</button>
</form>

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


<div id="update_success">E-mail added!</div>

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

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


<script type="text/javascript">
$(document).ready(function(){
$("form#submit_leave_email").submit(function() {
var input_leave_email = $('#input_leave_email').attr('value');
$.ajax({
type: "POST",
url: "insert.php",
data:"input_leave_email="+ input_leave_email,
success: function(){
$("#submit_leave_email").fadeOut();
$("#update_success").fadeIn();
}
});
return false;
});
});
</script>

2. insert.php

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


<?php
if(isset($_POST['input_leave_email'])){
/* Connection to Database */
include('config.php'); 
/* Remove HTML tag to prevent query injection */
$email = strip_tags($_POST['input_leave_email']);

$sql = 'INSERT INTO WALL (email) VALUES( "'.$email.'")';
mysql_query($sql);
echo $email;
} else { echo '0'; }
?>

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

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


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

^ Наверх ^