Довольно частая вещь на многих информационных порталах - это часы, показывающие текущее время. Хороший инструмент для людей, ценящих своё время. Рассмотрим такую функцию, реализованную целиком на javascript. Назовём её ShowCurrentTime() и разместим в секции <head><script> html-разметки сайта.
Получим текущее время:
var curDate = new Date();
Получим из этой переменной номер месяца:
var months = curDate.getMonth();
Обратите внимание, что индексация месяца начинается с нуля (т.е. 0 соответствует январю, а 11 - декабрю).
Далее получим текущий день месяца, час, минуту и секунду:
var days = curDate.getDate();
var hours = curDate.getHours();
var minutes = curDate.getMinutes();
var seconds = curDate.getSeconds();
Дата будет восприниматься ещё лучше, если часы и минуты всегда будем отображать в виде двухзначного числа (т.е. для чисел меньше десяти впереди добавлять нуль). Например, не "3:7", а "03:07".
if (hours < 10) { hours = "0" + hours; }
if (minutes < 10) { minutes = "0" + minutes; }
Теперь формируем результирующую строку, которая и будет отображаться пользователю:
datastr = days + ' ' + monthString + ' ' + hours;
if (seconds % 2 == 0)
datastr += ':';
else
datastr += ' ';
datastr += minutes;
Здесь используется небольшая хитрость: если число секунд чётное, то отделяем часы от минут двоеточием, иначе - пробелом. Таким образом, двоеточие будет то возникать, то исчезать. Это натолкнёт пользователя на мысль о том, что наши часы работают в реальном времени, а не застыли в момент создания страницы.
var element = document.getElementById('TimeLiteral');
element.innerHTML = datastr;
Поместим эту строку в целевой html-контейнер (это может быть, например, <div> или <span>). Главное, чтобы у этого элемента был проставлен атрибут id='TimeLiteral'. Разумеется, можно использовать любой другой текст в качестве значения атрибута.
Теперь сделаем так, чтобы функция вызывалась каждую секунду.
setTimeout(ShowCurrentTime, 1000);
Здесь мы указываем имя функции и задержку в миллисекундах, по истечению которой она будет вызвана.
Наконец, нам осталось запустить наш "часовой механизм". Для этого пропишем в тэге body следующий атрибут:
<body onload="ShowCurrentTime();">
Получим текущее время:
var curDate = new Date();
Получим из этой переменной номер месяца:
var months = curDate.getMonth();
Дата целиком воспринимается лучше, если месяц отображать в виде слова. Для этого придется использовать вот такую конструкцию:
var monthString = '';
switch (months) {
case 0: monthString = 'января'; break;
case 1: monthString = 'февраля'; break;
case 2: monthString = 'марта'; break;
case 3: monthString = 'апреля'; break;
case 4: monthString = 'мая'; break;
case 5: monthString = 'июня'; break;
case 6: monthString = 'июля'; break;
case 7: monthString = 'августа'; break;
case 8: monthString = 'сентября'; break;
case 9: monthString = 'октября'; break;
case 10: monthString = 'ноября'; break;
case 11: monthString = 'декабря'; break;
}
Обратите внимание, что индексация месяца начинается с нуля (т.е. 0 соответствует январю, а 11 - декабрю).
Далее получим текущий день месяца, час, минуту и секунду:
var days = curDate.getDate();
var hours = curDate.getHours();
var minutes = curDate.getMinutes();
var seconds = curDate.getSeconds();
Дата будет восприниматься ещё лучше, если часы и минуты всегда будем отображать в виде двухзначного числа (т.е. для чисел меньше десяти впереди добавлять нуль). Например, не "3:7", а "03:07".
if (hours < 10) { hours = "0" + hours; }
if (minutes < 10) { minutes = "0" + minutes; }
Теперь формируем результирующую строку, которая и будет отображаться пользователю:
datastr = days + ' ' + monthString + ' ' + hours;
if (seconds % 2 == 0)
datastr += ':';
else
datastr += ' ';
datastr += minutes;
Здесь используется небольшая хитрость: если число секунд чётное, то отделяем часы от минут двоеточием, иначе - пробелом. Таким образом, двоеточие будет то возникать, то исчезать. Это натолкнёт пользователя на мысль о том, что наши часы работают в реальном времени, а не застыли в момент создания страницы.
var element = document.getElementById('TimeLiteral');
element.innerHTML = datastr;
Поместим эту строку в целевой html-контейнер (это может быть, например, <div> или <span>). Главное, чтобы у этого элемента был проставлен атрибут id='TimeLiteral'. Разумеется, можно использовать любой другой текст в качестве значения атрибута.
Теперь сделаем так, чтобы функция вызывалась каждую секунду.
setTimeout(ShowCurrentTime, 1000);
Здесь мы указываем имя функции и задержку в миллисекундах, по истечению которой она будет вызвана.
Наконец, нам осталось запустить наш "часовой механизм". Для этого пропишем в тэге body следующий атрибут:
<body onload="ShowCurrentTime();">
Теперь наша функция вызовется один раз при загрузке страницы и затем будет вызываться каждую секунду до тех пор, пока страница будет открыта в браузере. Пример вывода функции: "17 июня 18:00".
Важно отметить, что время, отображаемое данной функцией будет равно времени текущего компьютера. Поэтому есть вероятность, что оно будет неправильным, если часы компьютера давно не синхронизировались.
Важно отметить, что время, отображаемое данной функцией будет равно времени текущего компьютера. Поэтому есть вероятность, что оно будет неправильным, если часы компьютера давно не синхронизировались.
