Clock

by Nikolay Vasilchuk

HTML

<div class="clock">
  <div class="h"></div>
  <div class="m"></div>
  <div class="s"></div>
</div>

CSS

.clock {
  background: black;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 0 0 1px black, inset 0 0 0 240px white;
}

.clock:before {
  content: '';
  display: block;
  position: absolute;
  width: 480px;
  height: 4px;
  top: 248px;
  left: 10px;
  box-shadow: inset 20px 0 0 0 black, inset -20px 0 0 0 black;
}

.clock:after {
  content: '';
  display: block;
  position: absolute;
  width: 4px;
  height: 480px;
  top: 10px;
  left: 248px;
  box-shadow: inset 0 20px 0 0 black, inset 0 -20px 0 0 black;
}

.h {
  background: black;
  position: absolute;
  top: 70px;
  left: 245px;
  width: 10px;
  height: 180px;
  transform-origin: center bottom 0;
  transform: rotate(0deg);
  border-radius: 5px;
}

.m {
  background: black;
  position: absolute;
  top: 30px;
  left: 247px;
  width: 6px;
  height: 220px;
  transform-origin: center bottom 0;
  transform: rotate(0deg);
  border-radius: 3px;
}

.s {
  background: black;
  position: absolute;
  top: 10px;
  left: 249px;
  width: 2px;
  height: 240px;
  transform-origin: center bottom 0;
  transform: rotate(0deg);
  border-radius: 1px;
}

JavaScript

var $clock = document.querySelector('.clock'),
  	$h = $clock.querySelector('.h'),
  	$m = $clock.querySelector('.m'),
  	$s = $clock.querySelector('.s');

(function tick() {
	var now = new Date(),
      s = now.getSeconds(),
  		m = now.getMinutes(),
  		h = now.getHours(),
      sdeg = s / 60 * 360,
      mdeg = m / 60 * 360 + sdeg / 60,
      hdeg = (h % 12) / 12 * 360 + mdeg / 60;
      
  $s.style.transform = 'rotate(' + sdeg + 'deg)';
  $m.style.transform = 'rotate(' + mdeg + 'deg)';
  $h.style.transform = 'rotate(' + hdeg + 'deg)';
	setTimeout(tick, 1000);
})();