Цифровий годинник

Публікації

Відображаємо час на веб-сторінці за допомогою 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');

Вдосконалимо цифровий годинник для виводу часу у вказаних містах. Для цього функція буде приймати другий параметр часову зону і відносно до неї розраховуємо час у вказаній часовій зоні.

Для отримання часу в вказаній часовій зоні виконуємо наступні дії:

  1. отримуємо кількість мілісекунд у даті по UTC за допомогою Date.UTC()
  2. множимо часову зону на 3600000 (кількість мілісекунд в одній годині) і додаємо до кількості мілісекунд у даті
  3. отримуємо час по UTC за допомогою Date.getUTCHours(), Date.getUTCMinutes(), Date.getUTCSeconds()

Для прикладу час у місті Нью-Йорк (GMT -4 год):
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 отримується браузером з дати і часу вказані у системі користувача. Тому і звісно точність години залежить від правильності вказаної години користувачем у системі. Хоча зазвичай дату і час отримують автоматично з мережі.

Адмін 2017-10-15 10:00:05

Тільки зареєстровані користувачі можуть писати коментарі.