Яндекс цитирования
 

Web-программирование

 

[ В начало раздела ]

Содержимое, чувствительное ко времени

Очень часто у вебдизайнеров возникает потребность изменить содержание страницы... :)))! или раздела. Причем только он знает, когда необходимо указать "срок годности" содержания.

Прочитав эту статью, Вы научитесь программировать WEB-страницы так, чтоб их содержимое изменялось в зависимости от текущей даты, от времени суток, месяцев, лет и т.д. - если Вы сами знаете, какое содержимое когда должно появляться на странице.

Пример, который мы здесь рассмотрим, выводит значки "Новинка!" и "Недавно" в зависимости от периода "срока действия".

Не буду вдаваться в подробности работы с объектами даты и времени в JavaScript, приведу лишь некоторые основные функции.

Дата и время в JavaScript храниться в объекте типа Date. Ниже представлена информация, которую Вы можете получить с помощью этого объекта.

  • getTime() - возвращает число миллисекунд, прошедших с 1 января 1970 года;
  • getYear() - возвращает двухразрядное значение года даты;
  • getMonth() - возвращает месяц как число;
  • getDate() - день месяца (1-31);
  • getHours() - час (0-23);
  • getMinutes() - минуты (0-59);
  • getSeconds() - секунды (0-59);
  • getDay() - возвращает день недели (0-воскресенье, 6-суббота);
  • getTimezoneOffset() - возвращает разницу в минутах между местным временем и Гринвичем;
  • toGMTString() - возвращает значение даты в стандартном символьном формате (День, DD Месяц YYYY HH:MM:SS GMT);
  • toLocalString() - дата в символьном формате, используя соглашения локальной системы;
  • UTC(year, month, day, hours, minutes, seconds) - число секунд до даты с 1 января 1970 года.

Узнав теперь чуть больше об объекте Date, напишем функцию, вставляющую в тело документа графическое изображение "Новинка!" или "Недавно" в зависимости от прошедшего периода времени (Period) от избранной даты (sDate). На рисунке ниже представлен результат работы скрипта.

Содержимое HTML-страницы, чувствительное ко времени

1. Содержимое HTML-страницы, чувствительное ко времени

Функцию разместим в файле JavaScript checkdate.js (см. ниже). Настоятельно рекомендую размещать его в корневой каталог WEB-сайта.

Рассмотрим алгоритм работы скрипта:

  • 1. Создаю объект даты timeNow - текущее время на пользовательском компьютере
  • 2. Создаю объект даты timeUpdate на основании информации об избранной дате
  • 3. Вычисляю значение прошедшего числа дней daysIsUp
  • 4. Если прошло 2/3 периода "срока действия", вывожу изображение "Новинка!"
  • 5. Если же времени прошло больше 2/3, но менее длины периода, вывожу картинку "Недавно".

Файл checkupdate.js.

<!--
function checkUpdate(sDate, Period) {
  // получаю текущее системное время
  var timeNow = new Date();
  // обрабатываю время с пользовательского компьютера
  var timeUpdate = new Date(sDate);
  // произвожу расчет 
  var daysIsUp = Math.round((timeNow.getTime() - timeUpdate.getTime())/(24*60*60*1000));
  if (daysIsUp<=Math.round(Period*2/3)) {
   document.write('<img src="/images/new2.gif" alt="Новинка!" width="75" height="20">');
  } else if (daysIsUp<=Period) {
   document.write('<img src="/images/new3.gif" alt="Недавнее" width="75" height="20">');
  }
}
//-->

После того, как скрипт написан, построим тестовую страницу. Вот ее код.

<html>
<head>
<title>Пример Java Script - Проверка содержимого страницы</title>
<script language="JavaScript" src="checkupdate.js"></script>
</head>

<body> <h1>Пример Java Script - Проверка содержимого страницы</h1> <p>Этот текст был изменен 19 июня 2001.  <script>checkUpdate("June 19, 2001", 14)</script></p> </body> </html>

Ну как, заметили полезность скрипта? Все простое - гениально. Теперь скорее начинайте его использовать на своем сайте. Не забывайте ссылаться на меня, хоть иногда.

© Долгов Сергей 19.06.2001

 

[ В начало раздела ]


 

 

Все для web-дизана!!! Бард-Путеводитель Много Всего CGI-Гид. Лучшие скрипты... WDH - WebDesignHelp - CGI, JAVA, APPLETS, TOP100! Раскрутка, увеличение посещаемости и индекса цитируемости в поисковых системах.

© 2000-2002 Долгов Сергей

dolgov_sergei@mail.ru

X