Дата и время на сайте

На многих сайтах мы видим идущие часы или таймер обратного отсчета. Сегодня мы разберемся, как установить такую функцию на сайте PIXLI.


Объект DATE()


С помощью объекта Date() в JavaScript можно работать со значениями даты и времени. Однако при этом необходимо учитывать:
  • В соответствии с соглашением UNIX датой появления JavaScript считается 1 января 1970 года. Соответственно с датами, предшествущими этой, работать нельзя.
  • При создании объекта Date, базой, на которой основывается отсчет времени внутри объекта, является клиентская машина. Таким образом, на ней желательно наличие работоспособных и точных часов. Это необходимо учитывать при написании сценариев, чувствительных ко времени.
  • JavaScript отслеживает значения даты и времени в форме миллисекунд с момента даты основания 1/1/1970
Создание объекта Date подобно созданию других объектов. В сценарии этот объект можно создавать в любых количествах.
var Data=new Date([parameters])
Параметры, необходимые для создания объекта Date():
  • Параметры отсутствуют – создается объект с текущими датой и временем.
  • «месяц дд, гггг чч: мм: сс» — создается объект с указанными датой и временем. Пропущенные значения считаются нулевыми.
  • «гг, мм, дд» — создает объект с указанной датой из набора целочисленных значений.
  • «гг, мм, дд, чч, мм, сс» — создает объект с указанной датой и временем из набора целочисленных значений.
  • GMT – время по Гринвичу.
Метод объекта – это функция, которая позволяет выполнять некоторые действия по изменению состояния объекта или дает доступ к его свойствам. Нам понадобятся методы объекта Date(), которые дают возможность получать данные о времени:
  • getDate() – возвращает день месяца (1-31)
  • getDay() – возвращает день недели (0-6)
  • getYear() – возвращает год
  • getHours() – возвращает час суток (0-23)
  • getMilliseconds() – возвращает миллисекунды
  • getMinutes() – возвращает минуты (0-59)
  • getMonth() – возвращает месяцы года (0-11)
  • getSeconds() – возвращает секунды (0-59)
  • getTime() – возвращает количество миллисекунд, начиная с 1/1/1970
Обратите внимание, что нумерация дней недели я месяцев начинается с 0!
Воскресенье имеет номер 0. Равно как и январь – тоже нулевой месяц. Это надо будет учитывать.

Начнем с простого примера – вывода текущей даты на экран.


Для вывода даты можно использовать следующие методы:
  • toDateString() Возвращает часть, содержащую только дату объекта Date в качестве человеко-читаемой строки.
  • toISOString() Преобразует дату в строку, следуя расширенному формату ISO 8601.
  • toLocaleDateString() Возвращает строку с датой, чьё представление зависит от системных настроек локали.
  • toLocaleFormat() Преобразует дату в строку, используя строку форматирования.
  • toString() Возвращает строковое представление указанного объекта Date.
  • toTimeString() Возвращает часть, содержащую только время объекта Date в качестве человеко-читаемой строки.
  • toUTCString() Преобразует дату в строку, используя часовой пояс UTC.
Попробуем вывести дату в локальном формате. Используем метод toLocaleDateString() с параметром русской даты. Добавьте блок и настройте вывод текста в нем. Это делается с помощью правой панели. Добавьте в блок HTML-код и впишите в него приведенный ниже скрипт.
<script>
d=new Date()
document.getElementById("ida0c6d234-ca2e-1065-809d-1141be55cee4").innerHTML=d.toLocaleDateString('ru-RU')
</script>
Свойство innerHTML вставляет указанное значение в блок. Чтобы получить его идентификатор, наведите на блок мышь, нажмите правую кнопку и скопируйте ID в буфер.

В итоге мы получим дату в таком формате

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

В этом случае нам придется писать код.
Воспользуемся массивом для того, чтобы задать русские значения. Массив в JavaScript представлен объектом Array(). Создание нового экземпляра осуществляется с помощью команды:
A=new Array()
В скобках можно перечислить значения:
mes= new Array("январь", "февраль", "март","апрель", "май","июнь","июль", "август", "сентябрь", "октябрь","ноябрь","декабрь")
Нумерация элементов массива начинается с нуля, поэтому нам удобно связать месяц с его значением в массиве. Например, метод getMonth() возвращает для января 0. А это как раз номер элемента массива со значением «январь».

Мы получим нормальный вывод даты

Идущие часы


Теперь попробуем сделать идущие часы. Для этого понадобится таймер. Динамический HTML имеет специальные методы объекта WINDOW:
  • clearInterval – обнуляет таймер, заданный методом setInterval.
  • clearTimeOut – обнуляет таймер, заданный методом setTimeOut.
  • setInterval – дает процедуре команду выполняться периодически через заданное количество миллисекунд.
  • setTimeOut – запускает программу через заданное количество миллисекунд после загрузки.
Оба метода удаления принимают в качестве параметра значение, возвращаемое методом set. Поэтому при установке таймера возвращаемое значение следует сохранять в переменной.
Например:
<script language="javascript">
function many(f)
	{
Interval=setInterval(function (){
window.alert("Ок")
},1000)
}
</script>

В этом примере запускается бесконечный таймер, который каждую секунду выводит на экран окно с надписью «ОК». Вместо команды вывода можно подставить любые действия. Например, вычисление времени. В качестве второго параметра можно установить любое число, следует только помнить, что это миллисекунды. То есть, 1 с = 1000мс, 1мин = 3600 мс и т.д.
Добавьте на сайт блок, настройте текст и выведите часы.
<script>
s=window.setInterval(function(){
data=new Date()
hours=data.getHours()
if (hours<10) hours="0"+hours
minutes=data.getMinutes()
if (minutes<10) minutes="0"+minutes
seconds=data.getSeconds()
if (seconds<10) seconds="0"+seconds
document.getElementById("ida0c6d234-ca2e-1065-809d-1141be55cee4").innerHTML=hours+':'+minutes+':'+seconds
},1000)
</script>

Создание таймера обратного отсчета


Часто на продающих сайтах мы видим рекламную акцию и время отсчета до ее окончания. Это тоже легко сделать, используя методы объекта Date() и таймер.
Начнем с создания сайта. Выберем подходящий шаблон. Например minimal.
Затем поместим блок в том месте, где будет расположен таймер. Вставим в него текст, блок html кода и еще один блок для вывода.

Настройте текст по желанию.
Затем выровняем блок по тексту. Для этого необходимо указать значение auto в качестве ширины блока.

Вот что получилось в итоге

Теперь осталось добавить код таймера. Откройте html блок и вставьте в него скрипт.
<script>
function timerEvent(eventDate)
  {
      var now = new Date();
      var output = '';      
     // количество дней до события
     var dtoEnd = Math.floor(Math.round(eventDate-now)/86400000);
     dtoEnd = (dtoEnd < 10) ? "0"+dtoEnd : dtoEnd;
     // количество часов до события
     var htoEnd = 24 - now.getHours() - 1;
    htoEnd = (htoEnd < 10) ? "0"+htoEnd : htoEnd;
     // количество минут до события
     var mtoEnd = 60 - now.getMinutes() - 1;
    mtoEnd = (mtoEnd < 10) ? "0"+ mtoEnd: mtoEnd;
     // количество секунд до события
     var stoEnd = 60 - now.getSeconds() - 1;
     stoEnd = (stoEnd < 10) ? "0"+ stoEnd: stoEnd;       
     //сообщение
       output = dtoEnd+" дней <p>"+htoEnd+" : "+mtoEnd+" : "+stoEnd;
   return output;
}

 window.onload = function(){
   // текущая дата
   var now = new Date();       
   // дата предстоящего события (год, месяц, число)
   var eventDate = new Date(2017,6,31);
   var span = document.getElementById('idb955722d-9c43-057c-93a4-b4e2fc82db3d');
   // если событие еще не наступило
   if(now < eventDate){
       window.setInterval(function(){ 
          span.innerHTML = timerEvent(eventDate); 
        },1000);           
    }               
 }
</script>
Разберем некоторые строки
var dtoEnd = Math.floor(Math.round(eventDate-now)/86400000);
Разница между двумя датами – это количество миллисекунд, которые прошли от более ранней до более поздней. То есть, вычитая из даты события текущую, мы получаем ответ на вопрос: сколько прошло миллисекунд? Метод round округляет полученное число, которое мы делим на 1000 миллисекунд*60 секунд*60минут *24часа. Это количество оставшихся дней.
dtoEnd = (dtoEnd < 10) ? "0"+dtoEnd : dtoEnd;
Если дней меньше 10, то добавляем 0 перед числом, чтобы получить формат «01».
var htoEnd = 24 - now.getHours() - 1;
Часы вычисляются по похожему принципу. Например, клиент открыл сайт в 15 часов. Тогда осталось до конца этого дня 24-15-1=8 часов. Меньше на 1, так как если последний час дня показывается нулем: 00 часов 59 минут. Аналогично считаются и минуты с секундами.
htoEnd = (htoEnd < 10) ? "0"+htoEnd : htoEnd;
Также устанавливаем формат вывода для однозначных чисел. Вместо «1» получим «01».
output = dtoEnd+" дней <p>"+htoEnd+" : "+mtoEnd+" : "+stoEnd;
Формируем строку вывода.
window.onload = function()
Запускаем таймер при полной загрузке страницы
var eventDate = new Date(2017,6,31);
Устанавливаем дату события. Обратите внимание, месяц 6 – июль.
var span = document.getElementById('idb955722d-9c43-057c-93a4-b4e2fc82db3d');
Получаем код блока вывода и запоминаем ссылку на него в переменную span.
if(now < eventDate){
       window.setInterval(function(){ 
          span.innerHTML = timerEvent(eventDate); 
        },1000);

Проверяем условие «Дата события не наступила». Если оно истинно, запускаем таймер и выводим дату каждую секунду (параметр 1000 – миллисекунд).
Обратный отсчет готов.
24 may 2017, 18:12    Ivan Web-дизайн 0    4 0

Comments (0)

    You need to login to create comments.