Самостоятельное создание сайта
Самостоятельная раскрутка и продвижение сайта

Создание часов

В этом примере описывается создание динамических часов с помощью 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 получает свойства элемента с id "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".

   Свойство innerHTML позволяет тегам div и span отображать любой текст через вызов этих тегов с помощью их идентификаторов.

188
3.4 35
Рейтинг: +3.4 , голосов 35
Вы еще не голосовали!
Добавить комментарий (комментариев: 3)
Удалить ответ

Ваш почтовый ящик никогда не будет опубликован
Трудно разобрать цифры? Нажмите на рисунок, чтобы обновить.
#1 09/06/2011 23:58 Vintik
reply
Очень хорошо работает. + дозайн можно подстроить Пример: ВЕЛО Izmail
#2 30/04/2011 12:14 daniil
reply
nichego ne poluchaetca
#3 29/09/2009 18:53 guest
reply
может setInterval, вместо setTimeout? setTimeout запустит один раз.

Дополнительно

» С чего начать сайт?

» Установка программ

» Пример создания сайта

» Хостинг и домен

» Оптимизация сайта

» Раскрутка сайта

» Заработок web-мастера

» Примеры PHP/Javascript

» Блог и мои записки

Последние новости

Статьи по рейтингу

» Особенности покупки контента 5.0 1
» Выбор хостинга 4.8 5
» Поисковые системы 4.7 9
» Курс молодого web-мастера 4.6 21
» Где взять бесплатные ссылки 4.5 11
» Что такое сниппеты 4.5 6
» Addstudio - SEO модуль 4.5 4
» Отладка js и CSS 4.4 14
» Стратегия дохода на Sape.ru 4.3 3
» Каталоги и биржи статей 4.3 4