Как сделать часы в html

и в нужном месте страницы разместить

Похожие статьи

• Озвучка часов
• Часы и минуты перевести в минуты
• Вызвать окно с системными часами
• Часы на JavaScript

Аналоговые часы на JavaScript

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

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

В нашем проекте нужны следующие файлы:

Чтобы скачать нужный фаил нажмите на него.

• index.html – файл с необходимой разметкой
• style.css – файл стилей наших часиков
• script.js – файл с функционалом наших часов
• clock.png – циферблат
• js.png – картинка для оформление циферблата

index.html

style.css

* < margin: 0; padding: 0; box-sizing: border-box; >body < display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #091921; >.clock < width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; background: url(clock.png), url(js.png), radial-gradient(circle, rgb(37, 73, 90) 0%, rgb(25, 48, 60) 11%, rgba(9,25,33,1) 38%); background-size: cover; border-radius: 50%; box-shadow: 0 -15px 15px rgba(134, 134, 134, 0.35), inset 0 -15px 15px #191919, 0 15px 15px rgba(134, 134, 134, 0.35), inset 0 15px 15px #191919 ; >.clock:before < content: ''; position: absolute; width: 15px; height: 15px; background-color: #ffffff; border-radius: 50%; z-index: 999; >.clock .hour, .clock .min, .clock .sec < position: absolute; >.clock .hour, .hr < width: 160px; height: 160px; >.clock .min, .mn < width: 190px; height: 190px; >.clock .sec, .sc < width: 230px; height: 230px; >.hr, .mn, .sc < display: flex; justify-content: center; position: absolute; border-radius: 50%; >.hr:before < content: ''; position: absolute; width: 8px; height: 80px; background-color: #ffc600; z-index: 10; border-radius: 6px 6px 0 0; >.mn:before < content: ''; position: absolute; width: 4px; height: 90px; background-color: #fff; z-index: 11; border-radius: 6px 6px 0 0; >.sc:before

script.js

const deg = 6; const hr = document.querySelector('#hr'); const sc = document.querySelector('#sc'); setInterval(() => < let day = new Date(); let hh = day.getHours() * 30; let mm = day.getMinutes() * deg; let ss = day.getSeconds() * deg; hr.style.transform = `rotateZ($deg)`; mn.style.transform = `rotateZ($deg)`; sc.style.transform = `rotateZ($deg)`; >)

Рабочий результат часов на JavaScript

See the Pen vYOaqEr by AntonAniskovich (@AntonAniskovich) on CodePen.

Видео с пошаговой инструкцией как сделать рабочие аналоговые часы на JavaScript

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

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

Несколько примеров реализации часов на Javascript для сайта. Простые цифровые часы , часы с секундами и миллисекундами , круглые часы со стрелками .

Самый простой способ реализации часов на JavaScript.

#clock

window.onload = function()< window.setInterval(function()< var now = new Date(); var clock = document.getElementById("clock"); clock.innerHTML = now.toLocaleTimeString(); >,1000); >;

Можно так (Javascript):

function clock() < var date = new Date(), hours = (date.getHours() < 10) ? '0' + date.getHours() : date.getHours(), minutes = (date.getMinutes() < 10) ? '0' + date.getMinutes() : date.getMinutes(), seconds = (date.getSeconds() < 10) ? '0' + date.getSeconds() : date.getSeconds(); document.getElementById('clock').innerHTML = hours + ':' + minutes + ':' + seconds; >setInterval(clock, 1000); clock();

See the Pen GgpgNd by DG Templates (@dgtemplates) on CodePen.

С текущей датой и днём недели:

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

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

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

Вызов скрипта на странице  
Это простые часы без оформления стиля.
12-часовой формат времени: AM/PM

AM = до полудня (от 00:00 до 11:00)
PM = после полудня (от 12:00 до 23:00)

12-часовой формат времени: AM/PM   
Результат:
12-часовой формат времени:
Примеры оформления простых часов для сайта
в HTML документе

Часы для сайта
  1 2 3 
Результат скрипта
Цветные часы для сайта
в HTML документе

4 
Цветные часы для сайта
   
: :
 
Результат скрипта
4 
Цветные часы для сайта
Часы + дата
Хорошо смотрятся на сайте часы совместно с датой оформленные в одну строку. 
В Примере 5 к скрипту часы добавлен скрипт дата. 
Вид строки оформляется средствами css под дизайн сайта.
5 Часы + дата   Сегодня:   ( )