Добавить дату и время на сайт

    Комментариев нет 4936

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

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

Телеграм-канал serblog.ru

Демо

Итак, для того, чтобы добавить дату и время на сайт в PHP, достаточно написать стандартную функцию, которая как раз и вызывает то, что нам нужно и у нее есть параметры, с которыми сейчас будем разбираться.

PHP

1
2

$date = date('d.m.Y H:i');
echo $date; // 28.09.2019 02:29

Выводить дату и время на сайте можно в различных форматах. Это один из самых распространенных. Но можно сделать и по другому. К примеру вывести дополнительно день недели, а так же написать название месяца. делается это так:

1
2

$date = 'Сегодня ' . date('d F Y l') . '. Время: ' . date('H:i');
echo $date; // Сегодня 28 September 2019 Saturday. Время: 02:33

Дата и время выводится, но как вы уже заметили, то не совсем так, как нам нужно. Желательно, чтобы название месяца и день недели был на русском. Это небольшой нюанс или даже особенность самого языка. Но решить это можно довольно-таки легко. Мы создадим 2 массива с кириллическими названиями дней и месяцев и тогда все должно работать нормально.

1
2
3
4
5
6
7
8
9
10
11

$days = array(
 'Воскресенье', 'Понедельник', 'Вторник', 'Среда',
 'Четверг', 'Пятница', 'Суббота',
);
$month = array(
  'Января', 'Февраля', 'Марта', 'Апреля',
  'Мая', 'Июня', 'Июля', 'Августа',
  'Сентября', 'Октября', 'Ноября', 'Декабря',
);
$date = 'Сегодня ' . date('d') . ' ' . $month[(date('n') - 1)] . ' ' . date('Y') . ' года. ' . $days[(date('w'))] . '. Время: ' . date('H:i');
echo $date // Сегодня 28 Сентября 2019 года. Суббота. Время: 02:45

Запись получилась длинноватой, но с задачей по добавлению даты и времени на сайт эта функция справилась отлично.

Добавить дату и время на сайт на JavaScript

И давайте сразу добавим корректные русские названия, чтобы все легко читалось. У функции вывода даты и времени в JS много разных параметров, я покажу наиболее часто используемые.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

var data = new Date();
var month=new Array(12);
  month[0]="Января";
  month[1]="Февраля";
  month[2]="Марта";
  month[3]="Апреля";
  month[4]="Мая";
  month[5]="Июня";
  month[6]="Июля";
  month[7]="Августа";
  month[8]="Сентября";
  month[9]="Октября";
  month[11]="Декабря";
var weekday=new Array(7);
  weekday[0]="Воскресенье";
  weekday[1]="Понедельник";
  weekday[2]="Вторник";
  weekday[3]="Среда";
  weekday[4]="Четверг";
  weekday[5]="Пятница";
  weekday[6]="Суббота";
document.write (data.toLocaleString()); // 28.09.2019, 02:50:33
document.write(data.toString()); // Дата: Sat Sep 28 2019 02:50:38 GMT+0300 (Москва, стандартное время)
document.write(data.getDate()+ ' ' + month[data.getMonth()]+ ' ' +data.getFullYear()+' года. '+weekday[data.getDay()]+'. Время: '+data.toLocaleTimeString()); // 28 Сентября 2019 года. Суббота. Время: 02:50:45
document.write('Сегодня ' +data.getDate()+ ' ' + month[data.getMonth()]+ ' ' +data.getFullYear()+' года. '+weekday[data.getDay()]+'. Время: '+data.getHours()+ ':'+data.getMinutes()); // Сегодня 28 Сентября 2019 года. Суббота. Время: 02:54

На демо странице первый и последний пример сделаны идентично, но следует отметить одну немаловажную деталь. Время в PHP и время в JS может отличаться. Все дело в том, что ПХП берет время с сервера, а JavaScript с вашего устройства, отсюда и разница. Оно может отличаться на несколько часов, в зависимости от часового пояса. Поэтому, если вам нужно вывести дату и время на сайте для пользователя, то лучше использовать JS. А счетчики посещений на серверных языках.

Идущие часы на сайт

И напоследок приведу небольшую JavaScript функцию, которая позволит вам добавить на сайт живые часы, которые будут отсчитывать время. Как на странице с примерами.

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript">
function startTime()
{
var tm=new Date();
var h=tm.getHours();
var m=tm.getMinutes();
var s=tm.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('timer').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i < 10)
{
i="0" + i;
}
return i;
}
</script>
</script>

HTML

1
2
3

<body onload="startTime()">
<div id="timer"></div>
</body>

Любая сумма на развитие сайта

Категории: Уроки   Тэги:

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

В телегу