Для відображення поточної дати і часу на сторінках існує багато варіантів, але JS має особливості звичайного виводу, які нам були не до вподоби (вірніше, вони не відповідали попередньому задуму). Прийшлося пошукати стежки, щоби обійти обмеження, а саме - виводити дату з ведучими нулями (JS віддає лише у форматі 1,2,3..) і треба скоротити рік з чотирьох цифр по замовченню, до потрібних двох.
Отже, скориставшись багато разів описаними способами виводу об'єкта Date(), ми змінили спосіб форматування результату. Допоміг нам в цьому метод slice(), який вирізає частину рядка, та повертає її вже як новий рядок в ById("calendar"):
/* Функції виводу дати і часу */
[JS]
<script>
function currentTime() {
var date = new Date();
var hour = date.getHours();
var min = date.getMinutes();
var seconds = date.getSeconds();
/* Форматуємо дату з ведучими нулями і скорочуємо рік до двох цифр */
document.getElementById("calendar").innerText = ('0' + date.getDate()).slice(-2) + '.' + ('0' + (date.getMonth() + 1)).slice(-2) + '.' + ('' + date.getFullYear()).slice(2);
/* Форматуємо годинник і періодично його оновлюємо */
document.getElementById("clock").innerText = ('0' + hour).slice(-2) + " : " + ('0' + min).slice(-2) + " : " + ('0' + seconds).slice(-2);
var t = setTimeout(function() {
currentTime()
}, 1000);
}
currentTime(); </script>Відобразити на сторінці результат можна будь-яким чином, додавши стилі за смаком:
<!-- Вивід дати і часу на сторінку -->
[HTML]
<div>Дата: <span id="calendar"></span><br>Час: <span id="clock"></span></div>Для формування нулів годинника є рішення більш професійне - за допомогою функції, яка додає нуль в разі числа, меншого за 10. Прикладом такого підходу може бути код приведений нижче:
/* Функції виводу годинника з лідиручими нулями */
[HTML + JS]
<p id="demo"></p>
<script>
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
function showTime() {
var date = new Date();
var DomElem = document.getElementById("demo");
var hours = addZero(date.getHours());
var minutes = addZero(date.getMinutes());
var seconds = addZero(date.getSeconds());
DomElem.innerHTML = hours + ":" + minutes + ":" + seconds;
var t = setTimeout(function() {
showTime()
}, 1000);
}
showTime(); </script>
/* Функція отримання поточної дати і часу і вивід на сторінку */
[JS]
<script>
/* Додавання лідируючих нулів */
function zero_first_format(value)
{
if (value < 10)
{
value='0'+value;
}
return value;
}
/* Функція дата-час */
function date_time()
{
var current_datetime = new Date();
var day = zero_first_format(current_datetime.getDate());
var month = zero_first_format(current_datetime.getMonth()+1);
var year = current_datetime.getFullYear();
var hours = zero_first_format(current_datetime.getHours());
var minutes = zero_first_format(current_datetime.getMinutes());
var seconds = zero_first_format(current_datetime.getSeconds());
return day+"."+month+"."+year+" "+hours+":"+minutes+":"+seconds;
}
/* Вивід результату в блок з id "current_date_time_block" */
document.getElementById('current_date_time_block').innerHTML = date_time();
/* Кожну секунду отримуємо поточну дату і час */
/* Вивід результату в блок з id "current_date_time_block2" */
setInterval(function () {
document.getElementById('current_date_time_block2').innerHTML = date_time();
}, 1000);
</script>
На сторінці результат роботи скрипта можна оформити будь-яким чином, додавши стилі:
<!-- Вивід дати і часу на сторінку -->
[HTML]
/* Вивід безпосередньо на сторінку через id "current_date_time_block" */
<div id="current_date_time_block"></div>
/* Вивід безпосередньо на сторінку через id "current_date_time_block2" */
<div id="current_date_time_block2"></div>Результат виконання прикладу: