В этом уроке я хочу показать, как создать простую страницу с обратным отсчетом времени с использованием PHP и jQuery. Что такое страница с обратным отсчетом времени? В общем, это страница, которая информирует посетителей сайта, о том, что он находится в стадии разработки и сколько времени осталось до его запуска. На странице находится счетчик с обратным отсчетом времени и форма, для добавления почтового адреса заинтересованных посетителей. В последствие, на сохраненные адреса можно разослать сообщение об открытии сайта. В этом уроке я покажу как создать страницу похожую на эту: Эту страницу можно легко изменить и украсить с помощью CSS. Также вы можете добавить логотип вашей компании и любые другие элементы, редактируя HTML код. Небольшое вступление Архив, который вы можете скачать с сайта готов к использованию и содержит следующие файлы: 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, создайте таблицу и загрузите все файлы урока на сервер. Наслаждайтесь!
Главная->Уроки по php->Как создать страницу с обратным отсчетом времени с помощью PHP и jQuery
