Часы при помощи JS (Рейтинг: +7)

Печать RSS

В этом примере описывается создание динамических часов с помощью Javascript. Для тех, кто только начинает изучать Javascript будет полезно детально разобраться в каждой детали функции.
Итак, перед нами стоит задача: создать на странице динамические часы, значение которых будет обновляться ежесекундно. Формат часов возьмем самый обычный hh:mm:ss (например, 16:05:45), где h - время суток, m - минуты, s - секунды.
Создадим простую web-страницу "index.html":

<html>
<head>
<title>Пример отображения динамических часов</title>
</head>
<body>
<script src="time.js" type="text/javascript"></script>
<center>
<table width=100% cellpadding=0 cellspacing=0 border=1>
<tr>
<td width=100%>Текущее время: <span id="tick_tack"></span></td>
</tr>
</table>
</body>
</html>

Как Вы заметили, мы подключаем к странице файл "time.js" с кодом Javascript.
Создаем файл "time.js" со следующим текстом:

function time(){
if (!document.all&&!document.getElementById) return
thelement=document.getElementById? document.getElementById("tick_tack"): document.all.tick_tack /* переменная thelement получает свойства элемента с итендификатором "tick_tack" */
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var seconds=Digital.getSeconds()
var dn="PM"
if (minutes<=9) minutes="0"+minutes
if (seconds<=9) seconds="0"+seconds
var ctime=hours+":"+minutes+":"+seconds
thelement.innerHTML="<b style='font-size:14;color:black;'>"+ctime+"</b>" /* браузер с помощью свойства элемента innerHTML отображает получаемое текстовое значение на месте этого элемента*/
setTimeout("time()",1000)} /* запускает на выполнение функции time каждые 1000 мс (1 секунда) */
window.onload=time /* запускает выполнение функции time при загрузке web-страницы */

Разместите оба файла в одной папке и запустите файл "index.html". Если часы не показываются, проверьте включена ли в браузере использование Javascript.
Теперь, кратко рассмотрим что происходит:
1. страница загружается, подгружается скрипт "time.js".
2. в скрипте получаем системное время и выводим его в текстовом формате вместо элемента с итендификатором "tick_tack".

Добавил: Удаленный 08.05.2010 / 17:26

javascript, часы, часы на javascript

Рейтинг: +7

Просмотры: 1819
Комментарии (3) »