Вебмастеру
   Пример 1.1
1. Еще примеры
   Пример 1.2
   Пример 1.3
   Пример 1.4
2. Кнопки
   Пример 2.1
   Пример 2.2
   Пример 2.3
   Пример 2.4
   Пример 2.5
   Пример 2.6
   Пример 2.7
3. Календарь JavaScript
   Пример 3.1
   Пример 3.2
   Пример 3.3
   Пример 3.4
   Пример 3.5
   Пример 3.6
4. Еще один календарь JavaScript
   Пример 4.1
   Пример 4.2
   Пример 4.3
   Пример 4.4
5. Интергрирование с PHP
   Пример 5.1
Приложение A
Приложение Б

   Пример для
   всех параметров

   zip

en

Вебмастеру

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 .

<script type="text/Javascript">
function todayDate() {

var today=new Date();
var mm=today.getMonth()+1;
var dd=today.getDate();
var yy=today.getFullYear();
var dt=1;
var hh=1;
var ll=1;
var tt=0;
var ss=1;

loadCalendar2r(mm,dd,yy,dt,hh,ll,tt,ss);
}
</script>

 
 
 
// Определить текущую дату
// Определить текущий месяц
// Определить текущий день
// Определить текущий год
// Выводить дату в формате "григорианский/юлианский"
// Выводить заголовок
// Выводить жития святых
// Запретить тропари
// Выводить Евангельские чтения
 

Давайте сделаем кнопку "Завтра" пример 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); // Определить завтрашнюю дату

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

function tomorrowDate() {

var today=new Date();
var tomorrow = new Date(today.getTime() + 24*60*60*1000);
var mm=tomorrow.getMonth()+1;
var dd=tomorrow.getDate();
var yy=tomorrow.getFullYear();
var dt=1;
var hh=1;
var ll=1;
var tt=0;
var ss=1;

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

 

// Определить текущую дату
// Определить завтрашнюю дату
// Определить завтрашний месяц
// Определить завтрашний день
// Определить завтрашний год
// Выводить дату
// Выводить заголовок
// Выводить жития святых
// Запретить тропари
// Выводить Евангельские чтения
 

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

var currentDay = new Date();

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

currentDay = today;

а для nextdayDate():

currentDay = next;

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

function nextdayDate() {

var next = new Date(currentDay.getTime() + 24*60*60*1000);
var mm=next.getMonth()+1;
var dd=next.getDate();
var yy=next.getFullYear();
var dt=1;
var hh=1;
var ll=1;
var tt=0;
var ss=1;

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

currentDay = next;
}
 



// Определить дату следующего дня
// Определить месяц следующего дня
// Определить день следующего дня
// Определить год следующего дня
// Выводить дату
// Выводить заголовок
// Выводить жития святых
// Запретить тропари
// Выводить Евангельские чтения

 

Функции 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.

Предыдущая глава: 1. Еще примеры

Следующая глава: 3. Календарь JavaScript

Пресвятая Троице, Боже Наш, Слава Тебе!