Вебмастеру

2. Кнопки

Теперь посмотрим, как работать с кнопками. Допустим, что при нажатии кнопок нам надо посмотреть жития святых в 1-го мая 2008 г. и 2-го апреля 2009 г. пример 2.1.

Начальная часть HTML кода такая же как и в предыдущих примерах: имеется ссылка на loadCalendar2r.js, стили и скрипт для всплывающих окон. Для майской кнопки код будет:

<button onclick="loadCalendar2r(5,1,2008,1,1,3,0,0)">Май 1, 2008</button>

Первые три параметра loadCalendar2r это месяц, день и год, т.е. 1 мая 2008. Чертветрый параметер позволяет выводить дату в формате "григорианский/юлианский". Пятый параметер выводит заголовок календаря. Шестой параметер опеределят вывод жизнеописаний святых в отдельных строчках. Седьмой параметер запрещает вывод тропарей и восьмой параметер запрещает вывод Евангельских чтений.

Код для апрельской кнопки:

<button onclick="loadCalendar2r(4,2,2009,1,1,3,0,0)">Апрель 2, 2009</button>

В примере 2.2 мы видим, как сделать кнопку для показа жизнеописаний святых и Евангельских чтений на текущий день. Код кнопки:

<button onclick="todayDate()">Сегодня</button>

При нажатии кнопки вызывается функция todayDate которая аналогична функции из примера 1.2 .

Давайте сделаем кнопку "Завтра" пример 2.3. Чтобы ее сделать, нам надо прибавить один день к текущему дню. Для этого мы используем метод getTime(). Метод getTime() возвращает количество миллисекунд с полуночи 1-го января 1970 г. В одном дне у нас 24*60*60*1000 миллисекунд: 24 часа * 60 минут * 60 секунд * 1000 миллисекунд. Завтрашний день, таким образом, будет:

var today=new Date(); // Определить текущую дату
var tomorrow = new Date(today.getTime() + 24*60*60*1000); // Определить завтрашнюю дату

Теперь мы можем написать функцию для вызова Православного календаря на завтрашний день:

На основе примера 2.3 мы можем написать код для кнопки "Следующий день" пример 2.4. Нам надо создать переменную, которая глобальна по отношению к функциям todayDate() и nextdayDate():

var currentDay = new Date();

Затем в конце каждой функции мы присвоим этой переменной значение вычисленного дня. Для todayDate() функции это будет:

currentDay = today;

а для nextdayDate():

currentDay = next;

Окончательный код для nextdayDate():

Функции todayDate() и nextdayDate() содержат одинаковый HTML код. Его можно оптимизировать, как показано в примере 2.5:

<script type="text/Javascript">
var currentDay = new Date(); // Set up current day for today

function callCalendar(x) {
var mm=x.getMonth()+1; // Определить месяц
var dd=x.getDate(); // Определить день
var yy=x.getFullYear(); // Определить год
var dt=1; // Выводить дату
var hh=1; // Выводить заголовок
var ll=3; // Выводить жития святых
var tt=0; // Запретить тропари
var ss=1; // Выводить Евангельские чтения

loadCalendar2r(mm,dd,yy,dt,hh,ll,tt,ss);
}

function todayDate() {
var today=new Date(); // Определить текущую дату
callCalendar(today);
currentDay = today;
}

function nextdayDate() {
var next = new Date(currentDay.getTime() + 24*60*60*1000); // Определить дату следующего дня
callCalendar(next);
currentDay = next;
}

</script>

Теперь легко сделать кнопку "Предыдущий день". На основе nextdayDate() мы напишем другую функцию previousDate(). В ней необходимо заменить знак + на знак - и имя переменной next на previous:

function previousDate() {
var previous = new Date(currentDay.getTime() - 24*60*60*1000); // Get tomorrow date
callCalendar(previous);
currentDay = previous;
}

Добавим код "Предыдущий день" перед кнопкой "Сегодня":

<button onclick="previousDate()">Previous Day</button>

Результат вы можете посмотреть в примере 2.6 или примере 2.7.