Делаем часы на Javascript для сайта
Несколько примеров реализации часов на Javascript для сайта. Простые цифровые часы, часы с секундами и миллисекундами, круглые часы со стрелками.
Самый простой способ реализации часов на JavaScript.
HTML:
<div id="clock"></div>
CSS:
#clock{ color: #000; font-weight: bold; font-size: 30px; }
JS:
window.onload = function(){ window.setInterval(function(){ var now = new Date(); var clock = document.getElementById("clock"); clock.innerHTML = now.toLocaleTimeString(); },1000); };
Можно так (JS):
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.
С текущей датой и днём недели:
See the Pen Javascript Clock by Robert Hodak (@donjuan960) on CodePen.
See the Pen Website #1 | JavaScript Clock by Alex Johnson (@IAmAlexJohnson) on CodePen.
С миллисекундами:
See the Pen Javascript Clock with Milliseconds by Jason Lee Wilson (@jasonleewilson) on CodePen.
Необычные часы в виде барабана:
See the Pen Rotating Javascript Clock Animation by Chandra Shekhar (@chandrashekhar) on CodePen.
Круглые часы:
See the Pen javascript clock by Bruce Murray (@bcgwebdesign) on CodePen.
See the Pen Dark_UI_Clock by JBEZZEL (@JBezzel) on CodePen.
Ещё примеры:
See the Pen Simple Javascript Clock by Mikael Elmblad (@Tcip) on CodePen.
See the Pen Javascript clock by ShevAbam (@ShevAbam) on CodePen.