Как добавить часы в html
Перейти к содержимому

Как добавить часы в html

  • автор:

Как добавить часы в html

HTML-элемент используется для представления либо времени в 24-часовом формате, либо точной даты по Григорианскому календарю (с опциональным указанием времени и часового пояса).

Этот элемент предназначен для представления дат и времени в машиночитаемом формате. Это облегчает клиентским приложениям добавление событий в календарь пользователя.

Примечание: Этот элемент неуместно использовать, когда точная дата не определена, а также при использовании дат ранее введения Григорианского календаря (из-за проблем с работой с такими датами).

Категории контента Основной поток, фразовый контент, явный контент.
Допустимый контент Фразовый контент.
Пропуск тегов Нет, открывающий и закрывающий теги обязательны.
Допустимые родители Любой элемент, который принимает фразовый контент.
Допустимые ARIA-роли Любые
DOM-интерфейс HTMLTimeElement

Атрибуты

Как и все другие элементы HTML, этот элемент поддерживает глобальные атрибуты.

Этот атрибут специфицирует время и дату и должен быть допустимой датой с возможным дополнительным указанием времени. Если значение элемента не может быть распознано как дата с возможным дополнительным указанием времени, элементу не будет сопоставлен временной срез (timestamp).

Часы для сайта

    Код скрипта нужно вставить между тегами . .

Код скрипта  function digitalClock() < var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); //* добавление ведущих нулей */ if (hours 
Вызов скрипта на странице  

Это простые часы без оформления стиля.

12-часовой формат времени: AM/PM
  1. AM = до полудня (от 00:00 до 11:00)
  2. PM = после полудня (от 12:00 до 23:00)
12-часовой формат времени: AM/PM   

Результат:

12-часовой формат времени:

Примеры оформления простых часов для сайта

в HTML документе
Часы для сайта

  1 2 3 

Результат скрипта

Цветные часы для сайта

в HTML документе
4
Цветные часы для сайта

   
: :

Результат скрипта

4
Цветные часы для сайта

Часы + дата

Хорошо смотрятся на сайте часы совместно с датой оформленные в одну строку.
В Примере 5 к скрипту часы добавлен скрипт дата.
Вид строки оформляется средствами css под дизайн сайта.

5 Часы + дата   Сегодня:   ( ) 

Аналоговые часы для сайта

в HTML документе

Виджеты Аналоговых часов для сайта

Виджет 1  Виджет 2  

Создаем цифровые часы на JavaScript

Из этого руководства вы узнаете, как с помощью JavaScript создать цифровые часы, показывающие время в 24 и 12-часовом форматах.

Обновлено: 2023-06-11 17:56:00 Наталья Кайда автор материала

Цифровые часы в 24- часовом формате

Структура

Создадим элемент div с атрибутом id = “clock” , в котором будет отображаться время с помощью JavaScript.

Стили

Для текста можно установить размер шрифта и цвет. В качестве шрифта выберем Orbitron . Время будет отображаться на черном фоне.

/* Google font */ @import url('https://fonts.googleapis.com/css?family=Orbitron'); body < background-color: #121212; >#clock

Как сделать расширение для браузера, требует знания JavaScript и веб-технологий.

Скрипт

Весь код часов основан на функции currentTime() . Внутри функции создается объект класса Date , который используется для получения текущего часа, минут и секунд. Их значения сохраняются в разных переменных.

function currentTime() < var date = new Date(); /* создание экземпляра объекта класса Date ()*/ var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); >

Чтобы элементы времени всегда отображались в двузначном формате, перед ними ставится 0 всякий раз, когда они меньше 10. Для этого используется метод updateTime() .

function currentTime() < hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); >function updateTime(k) < if (k < 10) < return "0" + k; >else < return k; >>

Теперь отобразим текущее время в элементе div . Для этого используется метод document.getElementById и свойство innerHTML .

document.getElementById("clock").innerHTML = hour + " : " + min + " : " + sec; /* adding time to the div */

Для сравнения дат в JS используйте объект Date и его методы.

Чтобы запустить таймер, применим метод setTimeout() . В качестве аргументов он принимает функцию currentTime() в качестве первого аргумента и временя (в миллисекундах). В нашем случае функция вызывается каждые 1000 миллисекунд.

Наконец, функция currentTime() вызывается для запуска всего процесса.

function currentTime() < var t = setTimeout(function()< currentTime() >, 1000); /* настаиваем таймер */ > currentTime(); /* Вызываем функция currentTime(), которая запускает весь процесс*/

Мы только что создали цифровые часы.

Цифровые часы в 12-часовом формате

Для часов с 12-часовым форматом времени HTML и CSS остаются такими же, как и в предыдущем случае.

Структура

Создаем блок div для отображения времени.

Стиль

Стиль часов тоже не меняется.

/* Google font */ @import url('https://fonts.googleapis.com/css?family=Orbitron'); body < background-color: #121212; >#clock

Добавление таймера для сайта может повысить вовлеченность пользователей.

Скрипт

JavaScript-код для цифровых часов показан ниже.

function currentTime() < var date = new Date(); /* создаем объект класса Date() */ var hour = date.getHours(); var min = date.getMinutes(); var sec = date.getSeconds(); hour = updateTime(hour); min = updateTime(min); sec = updateTime(sec); document.getElementById("clock").innerText = hour + " : " + min + " : " + sec; /* adding time to the div */ var t = setTimeout(function()< currentTime() >, 1000); /* настраиваем таймер */ > function updateTime(k) < if (k < 10) < return "0" + k; >else < return k; >> currentTime(); /* вызываем функцию currentTime() */

Нам необходимо добавить еще три строки кода и наши часы будут готовы. Создаем переменную и присваиваем ей начальное значение «AM». Эта переменная будет использоваться для хранения значения «AM» или «PM». Для присвоения переменной midday значения «PM» используется тернарный оператор.

function currentTime() < var midday = "AM"; midday = (hour >= 12) ? "PM" : "AM"; >

Чтобы отображать время в 12-часовом формате, количество часов не должно превышать двенадцать. Поэтому если оно больше, то 12 вычитается из количества часов. Кроме этого, количество часов меняется на 12.

function currentTime() < hour = (hour == 0) ? 12 : ((hour >12) ? (hour - 12): hour); >

Текущее время на странице сайта

Интересно, как сделать так, чтобы при нажатии на кнопку "дата" отображалось время и дата?

Отслеживать

51.4k 88 88 золотых знаков 269 269 серебряных знаков 508 508 бронзовых знаков

задан 23 янв 2012 в 8:39

1 1 1 золотой знак 1 1 серебряный знак 1 1 бронзовый знак

Именно при нажатии?

23 янв 2012 в 14:46

Откуда время нужно брать? с клиента(что лично мне кажется почти всегда неуместным, т.к. время у человека под носом вне зависимости от ОС) или с сервера? Второй конечно предпочтительней. Реализацию первого Вам уже описали, а вот второй я бы сделал на js + сервер. То есть динамически (ajax) обращался бы к скрипту, который бы возвращал строку с текущими датой и временем.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *