Главная Обратная связь

Дисциплины:

Архитектура (936)
Биология (6393)
География (744)
История (25)
Компьютеры (1497)
Кулинария (2184)
Культура (3938)
Литература (5778)
Математика (5918)
Медицина (9278)
Механика (2776)
Образование (13883)
Политика (26404)
Правоведение (321)
Психология (56518)
Религия (1833)
Социология (23400)
Спорт (2350)
Строительство (17942)
Технология (5741)
Транспорт (14634)
Физика (1043)
Философия (440)
Финансы (17336)
Химия (4931)
Экология (6055)
Экономика (9200)
Электроника (7621)






Пример вывода даты и времени на сайте с помощью JavaScript



Для получения текущего времени воспользуемся объектом Date(), который без аргументов и возвращает нужное нам текущее время.

time=new Date();

Но формат даты, определяемый этим объектом, нас не устраивает, для примера посмотрите

alert (Date());

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

getSeconds() - возвращает число секунд в диапазоне от 0 до 59;

getMinutes() - возвращает число минут в диапазоне от 0 до 59;

getHours() - возвращает число часов в диапазоне от 0 до 23;

getDay() - возвращает день недели в диапазоне от 0 до 6 (0->воскресенье, 1 -> понедельник, и т.д.);

getDate() - возвращает день месяца в диапазоне от 1 до 31;

getMonth() - возвращает номер месяца в диапазоне от 0 до 11;

getFullYear() - возвращает год в виде четырех чисел, минимальное значение 1970.


То есть часы, минуты и секунды получим следующим образом

time=new Date();

time_sec=time.getSeconds();// получаем секунды

time_min=time.getMinutes();// получаем минуты

time_hours=time.getHours();// получаем часы

Если возвращаемое значение функциями getSeconds(), getMinutes() и getHours() будет меньше 10, то цифры 0 не будет впереди. Поэтому напишем функцию представляющую вид часов в привычном для виде

function wr_hours()

{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

time_wr=((time_hours<10)?"0":"")+time_hours;

time_wr+=":";

time_wr+=((time_min<10)?"0":"")+time_min;

time_wr+=":";

time_wr+=((time_sec<10)?"0":"")+time_sec;

}

Теперь нужно нам это время вывести на экран монитора. Воспользоваться функцией document.write() не получится, так как нам нужно время обновлять через определенный промежуток времени. Воспользуемся свойством innerHTML, которое есть у каждого элемента HTML-кода. Это свойство содержит весь HTML-код данного элемента. Его можно изменять. И если его изменить, то изменится HTML-код, содержащийся в элементе, а, следовательно, и содержимое веб-странички. Поэтому поступим следующим образом. Будем выводить время в элементе span, которому дадим уникальный идентификатор hours. Впоследствии в JavaScript получим к нему доступ выражением

obj_hours=document.getElementById("hours")



<span id="hours"></span>

<script type="text/javascript">

obj_hours=document.getElementById("hours");

function wr_hours()¶{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

time_wr=((time_hours<10)?"0":"")+time_hours;

time_wr+=":";

time_wr+=((time_min<10)?"0":"")+time_min;

time_wr+=":";

time_wr+=((time_sec<10)?"0":"")+time_sec;

obj_hours.innerHTML=time_wr;

}

wr_hours();

</script>

В данном случае время не будет меняться, но чтобы время обновлялось, нужно функцию wr_hours() вызывать через определенное время. В этом нам поможет функция setInterval(), которая выполняет заданный код каждый раз по истечению заданного промежутка времени. Время в этой функции задается в миллисекундах.

setInterval("{выражение}", {временной интервал});

Мы зададим интервал равный одной секунде (1000 миллисекунд). Чаще обновлять нет смысла, так как у нас время выводится с точностью до секунды. Соответственно получим следующий код

<span id="hours"></span>

<script type="text/javascript">

obj_hours=document.getElementById("hours");

function wr_hours()

{

time=new Date();

 

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

time_wr=((time_hours<10)?"0":"")+time_hours;

time_wr+=":";

time_wr+=((time_min<10)?"0":"")+time_min;

time_wr+=":";

time_wr+=((time_sec<10)?"0":"")+time_sec;

obj_hours.innerHTML=time_wr;

}

wr_hours();

setInterval("wr_hours();",1000);



</script>

Теперь добавим дату и день недели. Так как функции getDay() и getMonth() возвращают лишь числа, а мы хотим видеть названия дня недели и месяца, то добавим два массива с перечислением дней недели и названиями месяцев.

name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа", "сентября","октября", "ноября","декабря");

name_day=new Array ("воскресенье","понедельник","вторник", "среда","четверг", "пятница","суббота");

В итоге получим следующий код

<html>

<head>

<title>Часы и дата на JavaScript</title>

</head>

<body>

<h1>Часы и дата на JavaScript</h1>

<div><span id="hours"></span>

</div>

<script type="text/javascript">

obj_hours=document.getElementById("hours");

name_month=new Array ("января","февраля","марта", "апреля","мая", "июня","июля","августа","сентября", "октября","ноября","декабря");

name_day=new Array ("воскресенье","понедельник", "вторник","среда","четверг", "пятница","суббота");

function wr_hours()

{

time=new Date();

time_sec=time.getSeconds();

time_min=time.getMinutes();

time_hours=time.getHours();

time_wr=((time_hours<10)?"0":"")+time_hours;

time_wr+=":";

time_wr+=((time_min<10)?"0":"")+time_min;

time_wr+=":";

time_wr+=((time_sec<10)?"0":"")+time_sec;

time_wr=" сегодня "+name_day[time.getDay()]+", "+time.getDate()+" "+name_month[time.getMonth()]+" "+time.getFullYear()+" г. время "+time_wr;

obj_hours.innerHTML=time_wr;

}

wr_hours();

setInterval("wr_hours();",1000);

</script>

</body>

</html>

И теперь на сайте будет дата и "тикающие" часы.

12. Непрерывно выводите заголовок первого уровня в стиле печатной машинки. После того, как строка напечатается полностью не стирайте ее побуквенно как в примере, повторяйте вывод сначала. Измените стиль заголовка: шрифт крупнее в 2 раза, красный цвет шрифта, курсив.


Эта страница нарушает авторские права

allrefrs.ru - 2019 год. Все права принадлежат их авторам!