Создание часов с помощью Javascript

Главная
Про проект
Книги
Обмен ссылками
Сервис
Добавить статью

Главная

Статьи в разделе:

Примеры PHP/Javascript
всего статей (9)

» Bcompiler расширение php

» Отладка скриптов в php

» Авторизация на sape.ru

» Cокеты в php

» Защита js кода

» Отправка почты на PHP

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

» Защита от спама

» Резолюция дисплея на Javascript

Другие разделы:

Подготовка к созданию сайта

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

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

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

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

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

Заработок Web-мастера

Кнопка сайта:

<a href="http://info-pages.com.ua" title="Самостоятельное создание сайта, веб-дизайн, web-программирование, продвижение и оптимизация сайта" target="_blank"><img src="http://info-pages.com.ua/picture/banner/1.gif" alt="Самостоятельное создание сайта, веб-дизайн, web-программирование, продвижение и оптимизация сайта" width="88" height="33" border="0"></a>

Елочные украшения купить

По всем вопросам пишите на webmaster@info-pages.com.ua. Вы можете свободно использовать/размещать/перепечатывать статьи сайта всего лишь указав ссылку на источник.

Создание часов с помощью Javascript


Создание часов с помощью Javascript	Размещено: 17 июля 2008

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

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