Делаем часы на 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.