Главная » Языки программирования

Электронные часы для html

Содержание
  1. Создаем цифровые часы на JavaScript
  2. Цифровые часы в 24- часовом формате
  3. Структура
  4. Стили
  5. Скрипт
  6. Цифровые часы в 12-часовом формате
  7. Структура
  8. Стиль
  9. Скрипт
  10. 44 CSS Clocks
  11. Related Articles
  12. Author
  13. Links
  14. Made with
  15. About a code
  16. Analog Clock
  17. Author
  18. Links
  19. Made with
  20. About a code
  21. Analog Clock
  22. Author
  23. Links
  24. Made with
  25. About the code
  26. Clock
  27. Author
  28. Links
  29. Made with
  30. About the code
  31. Minimalist Clock
  32. Author
  33. Links
  34. Made with
  35. About the code
  36. Orange Clock
  37. Author
  38. Links
  39. Made with
  40. About the code
  41. 3D Clock
  42. Author
  43. Links
  44. Made with
  45. About the code
  46. CSS Clock
  47. Author
  48. Links
  49. Made with
  50. About the code
  51. JS and CSS Clock
  52. Author
  53. Links
  54. Made with
  55. About the code
  56. Typographic Clock
  57. Author
  58. Links
  59. Made with
  60. About the code
  61. Clock
  62. Author
  63. Links
  64. Made with
  65. About the code
  66. Wall Clock
  67. Author
  68. Links
  69. Made with
  70. About the code
  71. Digital Clock
  72. Author
  73. Links
  74. Made with
  75. About the code
  76. Vue Time Comparison
  77. Author
  78. Links
  79. Made with
  80. About the code
  81. Analog Digital Clock
  82. Author
  83. Links
  84. Made with
  85. About the code
  86. Slide Clock
  87. Author
  88. Links
  89. Made with
  90. About the code
  91. CanvasClock
  92. Author
  93. Links
  94. Made with
  95. About the code
  96. JS + CSS Clock
  97. Author
  98. Links
  99. Made with
  100. About the code
  101. Clocks
  102. Digital Clock 3D
  103. Author
  104. Links
  105. Made with
  106. About the code
  107. CSS Clock
  108. Author
  109. Links
  110. Made with
  111. About the code
  112. Analog Clock
  113. Author
  114. Links
  115. Made with
  116. About the code
  117. CSS Variable-Powered Clock
  118. Clock
  119. Clock
  120. Sweet Analog Clock
  121. Animated Clock
  122. Rotating Clock
  123. Canvas Clock
  124. Cube Clock
  125. Analog Clock
  126. Pie Time
  127. Clock
  128. Author
  129. Links
  130. Made with
  131. About the code
  132. ATC Vintage Radio Flip Clock
  133. SVG Clock UI
  134. Clock Snap
  135. Clock 3D
  136. Pure HTML And CSS Braun Clock
  137. Apple Watch Clock
  138. Flip Clock with CSS / Javascript
  139. The QLOCKTWO In HTML5, CSS And Javascript
  140. Glitch Clock
  141. Author
  142. Часы для сайта
  143. 12-часовой формат времени: AM/PM
  144. Примеры оформления простых часов для сайта
  145. Цветные часы для сайта
  146. Часы + дата
  147. Аналоговые часы для сайта
  148. Виджеты Аналоговых часов для сайта
Читайте также:  Use mysql database python

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

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

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

Структура

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

Стили

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

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

Скрипт

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

Чтобы элементы времени всегда отображались в двузначном формате, перед ними ставится 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 */

Чтобы запустить таймер, применим метод 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); >

Источник

44 CSS Clocks

Collection of free HTML and CSS clocks: analog, digital, flip, animated and etc. Update of March 2019 collection. 5 new examples.

Author

Made with

About a code

Analog Clock

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About a code

Analog Clock

A simple analog clock made with pure CSS. No scripts. No images. No SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Clock

Author

Made with

About the code

Clock

Really clean and asthetic looking clock.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: Minimalist Clock

Author

Made with

About the code

Minimalist Clock

Minimalist clock, pure CSS with current time.

Compatible browsers: Chrome, Firefox, Opera, Safari

Demo image: Orange Clock

Author

Made with

About the code

Orange Clock

So two coworkers of me talked the whole day about oranges. Later they saw a clock on a website and said to me «i bet you cant do this» so i made a orange clock for them.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Made with

About the code

3D Clock

A 3D (looking) clock made with CSS gradients and borders.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Demo image: CSS Clock

Author

Made with

About the code

CSS Clock

Pure CSS clock design.

Demo image: JS and CSS Clock

Author

Made with

About the code

JS and CSS Clock

JS and CSS clock with sound.

Demo image: Typographic Clock

Author

Made with

About the code

Typographic Clock

Very cool typographic clock.

Demo image: Clock

Author

Made with

About the code

Clock

Very nice clock in HTML, CSS and JavaScript.

Demo image: Wall Clock

Author

Made with

About the code

Wall Clock

Giant clock to have as fullscreen on a screen while not using it.

Demo image: Digital Clock with Vue.js

Author

Made with

About the code

Digital Clock

Demo image: Vue Time Comparison

Author

Made with

About the code

Vue Time Comparison

Using the browser’s native API for .toLocaleTimeString to get rid of libraries like moment.js for world time that respects daylight savings. Made with Vue, SVG, GreenSock.

Demo image: Analog Digital Clock

Author

Made with

About the code

Analog Digital Clock

Analog/Digital clock with HTML, CSS and JS.

Demo image: Slide Clock

Author

Made with

About the code

Slide Clock

HTML and CSS slide clock with little JS.

Demo image: CanvasClock

Author

Made with

About the code

CanvasClock

Clock with HTML5 canvas and CSS3.

Demo image: JS + CSS Clock

Author

Made with

About the code

JS + CSS Clock

A clock made with JavaScript and CSS, working with your device’s internal time.

Demo image: Clocks

Author

Made with

About the code

Clocks

Clocks with three different time-zones.

Digital Clock 3D

An original quick pen of a 3D digital clock concept with RxJS and CSS variables for #3December.
Made by David Khourshid
February 7, 2017

Demo image: CSS Clock

Author

Made with

About the code

CSS Clock

Realistic minimal HTML and CSS clock.

Demo image: Analog Clock

Author

Made with

About the code

Analog Clock

Simple analog clock with HTML/CSS/JS.

Demo image: CSS Variable-Powered Clock

Author

Made with

About the code

CSS Variable-Powered Clock

Clock

A sweet little clock.
Made by Jack Oliver
September 2, 2016

Clock

HTLM, CSS and JavaScript clock.
Made by Hugh Dai
July 4, 2016

Sweet Analog Clock

Simulation of simple analog clock in HTML with audio.
Made by Monkey Raptor
May 18, 2016

Animated Clock

HTML, CSS and JavaScript animated clock.
Made by Ophelia Fournier-Laflamme
May 17, 2016

Rotating Clock

Click the CLOCK to change the style.
Made by Vicio Bonura
May 9, 2016

Canvas Clock

A clock made whith canvas Javascript.
Made by Marco Antonio Aguilar Acuña
February 28, 2016

Cube Clock

Cube clock in HTML, CSS and JavaScript.
Made by Stix
January 22, 2016

Analog Clock

A simple clock made with JS and CSS.
Made by Nail Davlyatchin
December 20, 2015

Demo Image: Pie Time

Pie Time

Canvas pie chart clock with second, minute & hour progression.
Made by Tiffany Rayside
December 13, 2015

Clock

A recreation of a dribbble shot designed by Zaib Ali.
Made by Fabian D
September 29, 2015

Demo image: ATC Vintage Radio Flip Clock

Author

Made with

About the code

ATC Vintage Radio Flip Clock

Demo Image: SVG Clock UI

SVG Clock UI

SVG based clock UI design. Animated with GSAP.
Made by Icebob
September 6, 2015

Clock Snap

Clock snap with HTML, CSS and JavaScript.
Made by Rodny Lobos
August 4, 2015

Clock 3D

Hacked from 3D Java Clock V1.12 by Bennet Uk.
Made by Gerard Ferrandez
July 31, 2015

Pure HTML And CSS Braun Clock

Braun clock created in pure HTML and CSS for fun. Best rendered in Google Chrome. Still working out small visual bugs.
Made by Chris Ota
July 15, 2015

Apple Watch Clock

This clock works with simple CSS animation. The JS is only used to catch the current time, and place the needles, the CSS does the rest.
Made by Malik Dellidj
June 14, 2015

Flip Clock with CSS / Javascript

Simple flip clock that displays the current time with some basic CSS3 transitions.
Made by Paul Noble
May 9, 2015

The QLOCKTWO In HTML5, CSS And Javascript

Build in pure HTML, CSS and JavaScript. No image were used. It supports five languages (english, german, french, italian and spanish) and you can change the color.
Made by Fabrice Weinberg
January 9, 2015

Glitch Clock

Glitch clock with HTML, CSS and JavaScript.
Made by Constantine
November 30, 2014

Demo image: Digital Clock

Author

Источник

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

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

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

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


12-часовой формат времени: AM/PM   
 
Примеры оформления простых часов для сайта
 
  1 2 3 

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


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

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

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

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

Источник

Оцените статью