Отже, перед нами стоїть завдання: створити на сторінці динамічні годинник, значення яких буде оновлюватися щосекунди. Формат годин візьмемо самий звичайний hh: mm: ss (наприклад, 16:05:45), де h - час доби, m - хвилини, s - секунди.
Створимо просту web-сторінку "index.html":
| Поточний час: |
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 = " "+ Ctime +" "/ * Браузер за допомогою властивості елемента innerHTML відображає одержуване текстове значення на місці цього елемента * /
setTimeout ( "time ()", 1000)> / * запускає на виконання функції time кожні 1000 мс (1 секунда) * /
window.onload = time / * запускає виконання функції time при завантаженні web-сторінки * /
Тепер, коротко розглянемо що відбувається.
1. сторінка завантажується, завантажується скрипт "time.js".
2. в скрипті одержуємо системний час і виводимо його в текстовому форматі замість елемента з ідентифікатором "tick_tack".
Властивість innerHTML дозволяє тегам div і span відображати будь-який текст через виклик цих тегів за допомогою їх ідентифікаторів.