Відображаємо час на веб-сторінці за допомогою JavaScript.
Для цього будемо використовувати об'єкт Date і метод setTimeout().
Так як методи Date.getHours(), Date.getMinutes(), Date.getSeconds() повертають число. Щоб не було час формату '12:7:8' використовуємо створену функцію dn яка додає 0 якщо передане число менше 10.
Функція яка виводить поточний час у вказаний елемент:
times=function(id){
function dn(n){return (n<10?'0'+n:n);} //функція додає 0 якщо вказаний параметр має один символ. 2 -> 02
var d=new Date();
document.getElementById(id).innerText=dn(d.getHours())+':'+dn(d.getMinutes())+':'+dn(d.getSeconds());
setTimeout('times("'+id+'")',1000);
}
times('test');
Вдосконалимо цифровий годинник для виводу часу у вказаних містах. Для цього функція буде приймати другий параметр часову зону і відносно до неї розраховуємо час у вказаній часовій зоні.
Для отримання часу в вказаній часовій зоні виконуємо наступні дії:
- отримуємо кількість мілісекунд у даті по UTC за допомогою Date.UTC()
- множимо часову зону на 3600000 (кількість мілісекунд в одній годині) і додаємо до кількості мілісекунд у даті
- отримуємо час по UTC за допомогою Date.getUTCHours(), Date.getUTCMinutes(), Date.getUTCSeconds()
timesZone=function(id,zone){
function dn(n){return (n<10?'0'+n:n);} //функція додає 0 якщо вказаний параметр має один символ. 2 -> 02
var d=new Date();
var t=Date.UTC(d.getUTCFullYear(),d.getUTCMonth(),d.getUTCDate(),d.getUTCHours(),d.getUTCMinutes(),d.getUTCSeconds(),d.getUTCMilliseconds());
t=t+(zone*3600000);
d=new Date(t);
document.getElementById(id).innerText=dn(d.getUTCHours())+':'+dn(d.getUTCMinutes())+':'+dn(d.getUTCSeconds());
setTimeout('timesZone("'+id+'",'+zone+')',1000);
}
timesZone('test2',-4); //для міста Нью-Йорк часова зона -4
Зверніть увагу що поточна дата і час у JavaScript отримується браузером з дати і часу вказані у системі користувача. Тому і звісно точність години залежить від правильності вказаної години користувачем у системі. Хоча зазвичай дату і час отримують автоматично з мережі.