Дата і час (приклад використання об'єкта date)
Даний сценарій дозволяє виводити оновлювану в реальному часі дату і час, а так само описана настройка шаблону для впровадження результатів роботи скрипта в будь-яке місце сторінки.
Опис роботи скрипта
В HTML документі, місця для підстановки результатів виконання скрипта, визначаються за допомогою іменованих елементів span. За допомогою імен заданих у властивості name ми маємо доступ до управління цими елементами за допомогою скрипта. Спочатку span не робить нічого, крім відображення свого вмісту, тобто після завантаження сторінки ви побачимо наступне
Поточний час. і сьогодні.
Тепер перейдемо до скрипту. При завантаження сторінки йде ініціалізація глабальних масивів з українськими назвами днів тижня (починаючи з неділі) і місяців.
Після йде функція UpdateTime (). Спочатку створюється об'єкт містить інформацію про поточний час:
var CurrentTime = new Date ();
Далі ми описуємо два об'єкти описують доступ до іменованих елементів span (зміни цих об'єктів будуть призводить до змін у вмісті HTML документа):
Отримуємо значення годин:
Для більш естетичного відображення якщо годину менше, ніж 10, то додаємо на початку нуль (напрмер, 9 міняємо на 09). Те ж саме робимо для хвилин і секунд. Складаємо час в форматі ГГ: ХХ: СС:
outString = h + ":" + m + ":" + s;
І виводимо в шаблон ??
При цьому у нас вміст контейнера span змінюється с. на даний час ГГ: ХХ: СС. Переходимо до дати. День місяця визначається за допомогою методу getDate (). Номер місяця задається методом getMonth (). Значення місяця від 0 до 11 використовуються як індекс масиву і іменами місяців month. День тижня від неділі до понеділка задаються значеннями від 0 до 6 методом getDay (). а імена днів тижня витягуються з мессіво week. Після замінюється вміст контейнера значенням дати: В останньому рядку задається команда виконати той же код (але вже для нової дати) через секунду: Примітка 1. Відзначимо, що в тезі body ми могли б використовувати метод, що дозволяє виконувати заданий код через певний інтервал часу setInterval: При цьому, ми повинні видалити останній рядок скрипта (тому що періодичне виконання вже визначено): setTimeout ( "UpdateTime ()", 1000); . На жаль останній варіант (з setInterval) не підтримує старими браузерами (наприклад, InternetExplorer 4), а перший варіант (з setTimeout) виконується практично в будь-якому браузері. Примітка 2. На основі цього прикладу ви можете складати власні скрипти по підходящі для вашої сторінки цілі. Просто в місці відображення даних в HTML документі ставите іменований контейнер ??, прописуєте в скрипті відповідний об'єкт var InputVar1 = document.getElementById ( 'MyVar1'); а далі змінюєте вміст контейнера вмістом змінної outString (або іншим значенням): Скопіюйте наведений нижче скрипт в окремий HTML файл (наприклад, date_and_time.html) і відкрийте сторінку в браузері.Повний код скрипта "Дата і час"
Приклад виконання скрипта