часы для сайта html код

Бесплатный настраиваемый виджет часов для вашего сайта

Нужны точные часы для вашего сайта? Дата, время восхода и заката, долгота дня? Достаточно выбрать нужные параметры и скопировать код. И это бесплатно!

Настройки

Условия использования

Дополнительные возможности

Есть два скрипта виджета: упрощённая версия, t.js, которая отображает только время, и основной скрипт виджета, ru.js, который может отображать время, дату, время восхода и заката, продолжительность дня. Основной скрипт виджета доступен на нескольких языках. Для других языков замените ru в названии скрипта на код нужного языка. (Например, pl.js для польского языка и tr.js для турецкого.)

Параметры функции init:

Названия параметров и их значения чувствительны к регистру. Можно использовать HTML и другое содержимое в параметрах template, time_format, date_format и sun_format.

Можно создать несколько часов следующим образом:

Значения параметров time_format, date_format, sun_format и template наследуются, так что вам не нужно их повторять, если значение такое же, как и для ранее определённого виджета.

Источник

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

Часы считаются одним из самых популярных скриптов для сайта. На основе этого скрипта можно делать не только таймеры, но и анимацию. Для написания html кода часов для сайта используется 2 метода на JavaScript.

Метод toLocaleTimeString()

Этот способ реализации предусматривает заготовку html шаблона:

После этого указываются такие свойства:

Теперь можно приступить к написанию html кода для часов на сайт. Для этого используется метод toLocaleTimeString(). Он предназначен для вывода часов в формате, который установлен на операционной системе пользователя. Популярность этого метода обусловлена его удобством и краткостью.

Этот способ реализации предусматривает запуск часов сразу же после загрузки сайта. С этой целью используется функция onload. Также потребуется применение функции setInterval(). Она принимает 2 параметра:

Отдельный вывод элементов

Второй способ реализации предусматривает вытягивание всех элементов часов по отдельности. Перед тем, как сделать HTML часы на сайте этим методом, необходимо создать блок для вывода времени:

В данном примере указываются такие свойства:

Это способ реализации позволяет поместить весь код в функцию, вызывающуюся после блока для вывода часов. Эта функция взаимодействует с объектом Date с целью получения различных элементов часов.

Главным преимуществом данного метода считается удобство. Разработчик самостоятельно контролирует формат времени на часах. С этой целью можно реализовать проверку, которая при необходимости добавит недостающие нули. После этого формируется строка, в которой указывается свойство innerHTML и выполняется вывод времени в заданном блоке. Для корректной работы этого метода в функции вывода реализован стандартный таймер, запускающий ее каждую секунду.

Разноцветные часы

Веб-разработчикам, которые используют бесплатный html код часов для сайта, доступны не только стандартные способы реализации, но и весьма оригинальные. Примером являются разноцветные часы, которые будут менять цвет каждую секунду. Алгоритм реализации таких часов указан ниже. Стоит заметить, что перед его применением необходимо добавить 3 элемента span с секундами, минутами и часами.

Пример с исходным кодом для вывода часов:

See the Pen Gooey Clock by Michael Leonard (@mikel301292) on CodePen.

Источник

Дата и время в HTML. Формат, текущее время, часы на сайте

При работе с датой и временем на сайте есть необходимость в том, чтобы суть содержимого понимали как пользователи сайта, так и роботы (поисковые системы, скрипты и т.п).

Для человека будет достаточно написать «сегодня в 10», «через 3 дня», в «прошлом году», но для «машины» такая запись далеко не всегда будет информативной. Формат даты и времени в HTML позволяет описывать выражения подобные этим, а также указывать не только временные точки, но и временные отрезки, например «длительность 2 часа 17 минут».

Рассмотрим как правильно писать дату и время в HTML.

Формат точной даты и времени YYYY-MM-DDThh:mm:ssTZD

Этот формат используется для указания конкретной временной точки («20-го апреля», «сегодня в 8 утра», «15 января 2001 года»).

В зависимости от потребностей вы можете использовать как все составляющие, так и какую-то их часть.

Расшифровка формата YYYY-MM-DDThh:mm:ssTZD:

Рассмотрим примеры вывода даты и времени в формате временной точки.

Формат периода времени (длительность)

Формат PWDTHMS используется когда нужно указать не конкретную точку, а период времени: «3 дня», «2 часа 5 минут» и т.п. То есть, когда нужно показать длительность.

Длительность периода считается в секундах. Если указана другая величина, время приводится к секундам путем умножения:
2 минуты = 2*60 = 120 секунд и т.п.

Расшифровка формата PWDTHMS:

Примеры указания периода времени:

Как вставить текущее время в HTML

Вывести на страницу сайта текущее время используя только лишь HTML не получится.

Для того, чтобы вставить текущую дату и время на сайт будем использовать JavaScript.

Попробуем вывести текущую дату и время на экран с помощью встроенного скрипта:

Как видим, выводится вся информация о дате и времени.

Дата и время в HTML в привычном формате

Поскольку функции возвращают значения месяцев, дней, часов, минут, секунд без ведущих нулей, нам понадобится написать дополнительную функцию, которая будет эти нули добавлять.

Также обратите внимание на то, что функция getMonth() возвращает значение от 0 до 11 (количество полных месяцев, прошедших от начала года до указанной даты), а не порядковый номер месяца от 1 до 12. Поэтому, чтобы получить календарный номер месяца нужно к результату функции прибавить единицу.

Вставить текущее время и дату в HTML в привычном формате можно с помощью следующего кода:

Таким образом у нас получилось вывести на страницу сайта точное время на момент открытия страницы.

Часы на сайт, обновляемые в реальном времени

Если мы хотим, чтобы пользователь всегда видел актуальное время, то есть хотим сделать часы на странице, нужно реализовать обновление времени один раз в секунду (либо в минуту, если вы не выводите секунды). Для этого воспользуемся интервалом в JavaScript.

Источник

Аналоговые часы на HTML5 c логикой на JavaScript

Для кого и зачем эта статья?

Что мы будем делать?

Реализация цифровых часов

Создадим три файла в текстовом редакторе. (Все три файла должны лежать в одной папке).

index.html — основная страничка
clockscript.js — скрипт с логикой работы
style.css — файл стилей

Один из вариантов реализации может быть следующим. Файл index.html:

Разберемся с работой clockscript.js:

Выполняем внутренний JavaScript-код при помощи привязки к событию onload корневого объекта Window :

Объект Date используется для проведения различных манипуляций с датой и временем. С помощью конструктора создаем его экземпляр и называем d:

Находим объект DOM по его id. Это именно тот объект, в который мы хотим выводить наше время. Это может быть параграф, заголовок или еще какой-то элемент. У меня это div-блок. После получения элемента по id, используем его свойство innerHTML для получение всего содержимого элемента вместе с разметкой внутри. И передаем туда результат метода toLocaleTimeString(), который возвращает форматированное представление времени:

Вот, что должно получиться(время динамически изменяется каждую секунду):

Реализация аналоговых часов

С этого момента мы будем использовать Canvas (HTML), который будет служить нам холстом для творчества.

Чтобы увидеть наш холст в файле index.html внутри body мы должны где-то расположить следующий тег, сразу определив его размеры:

Ну что, давайте вспоминать математику? Нам важно понять связь между делениями определенных стрелок и углом их поворота на будущем циферблате.

Угол поворота всех стрелок за 1 секунду:

То есть даже за 1 секунду все стрелки должны повернуться, каждая на соответствующий угол. И если это не учесть, то первый подводный камень, который мы получим в отображении, будет некрасивая анимация. К примеру, когда время будет 19:30, то часовая стрелка будет ровно показывать на 19 часов, хотя в реальной жизни она должна уже быть наполовину приближена к 20 часам. Аналогично, приятнее будет выглядеть плавное передвижение минутной стрелки. Ну а секундная стрелка пусть перещелкивается дискретными движениями, как в большинстве реальных механических часов. Решение проблемы: прибавлять к углы поворота текущей стрелки угол поворота более быстрой стрелки, домноженный на коэффициент, обозначающий его долю от угла текущей стрелки.

Угол вращающегося радиус-вектора(стрелки часов) отсчитывается от положительного направления в направлении против часовой стрелки. Если мы это не учтем в нашей логике, то направим часы назад в прошлое.

И еще, отсчет часов, минут и секунд у нас происходит от цифры 12, верхнего положения. Решение проблемы: в наших формулах мы должны учесть это в качестве сдвига +π/2 (90 o ). А перед значением угла ставить знак «-«, чтобы часы шли именно по часовой стрелке. И, конечно, учитывать, что передача угла в градусах в тригонометрические функции языков программирования осуществляется с умножением на коэффициент «π/180 o «.

Реализация на примере секундной стрелки:

В ходе разметки рисочек циферблата нужно как-то выделить рисочки напротив часов. Всего рисочек — 60 для секунд и минут. 12 — для часов. Эти 12 должны как-то выделяться на фоне всех остальных. Также симметричность оцифровки зависит от ширины цифр. Очевидно, что цифры 10, 11 и 12 шире, чем 1, 2, 3 и т.д. Про это нужно не забыть.

Решение проблемы и вариант оцифровки циферблата:

С учетом всего этого, мой вариант исполнения кода логики и отображения аналоговых часов выглядит следующим образом:

Заключение

Вот такие часы должны получиться в итоге. Надеюсь, что данная статья поможет вам разобраться в элементарной анимации на JavaScript и зародит у вас интерес к освоению этого прекрасного языка программирования. Спасибо за внимание.

Источник

Часы на JavaScript

Часы являются одним из простых скриптов, но, одновременно с тем, и наиболее часто используемым для сайта. На его основе можно сделать различные таймеры, а также анимацию, зависящую от времени. Сегодня я расскажу, как сделать часы на JavaScript двумя способами.

Для написания первого скрипта нам понадобится HTML заготовка, с которой и будем работать:

Укажем ей следующие свойства:

Теперь можно писать сам код. Основан он будет на использовании метода toLocaleTimeString() объекта Date. Этот метод выводит полное время в формате, установленном у пользователя на его ОС. Порой, это бывает очень удобно, а главное этот вариант самый короткий.

В этой реализации часы будут запускаться после загрузки страницы, для этого скрипт обернут в функцию onload. Далее используется функция setInterval(), принимающая два параметра: интервал в одну секунду и анонимную функцию, которая будет получать текущие время и выводить его в блок с >

Второй способ – часы на сайте: «часы, минуты и секунды отдельно»

Во втором варианте скрипта, все элементы часов вытягиваются по отдельности, а именно часы, минуты и секунды. Так же как и в первом скрипте, нужно создать блок, в котором будет выводиться время в этом случае с >

Указываем ему отличные свойства от первого скрипта:

Весь код помещается в функцию, которая будет вызвана после элемента с Внутри её идёт взаимодействие с объектом Date, а именно: получения через его методы часы, минуты и секунды. Этот способ удобен тем, что мы можем сами контролировать формат выхода времени часов на сайте. Для этого в примере есть проверка, которая дописывает недостающие нули в записи от времени. Далее формируется строка, и при помощи свойства innerHTML происходит вывод времени на странице в блок с В конце функции запускается обычный таймер, который через каждую секунды вызывает эту же функцию.

Разноцветные часы на JavaScript

Выше были показаны стандартные способы вывода часов на сайте. Конечно, всё это можно усложнить и сделать чуть-чуть интереснее, например: каждую секунду менять цвет часов, минут и секунд. Ниже как раз описан такой алгоритм, но для его реализации необходимо добавить три элемента span с >

В заключение к этой статьи я хочу добавить, что часы можно сделать достаточно оригинальными и интересными, если потратить на это чуть больше времени, хотя сама логика скрипта достаточна проста.

Источник