SOURCE

window.addEventListener('DOMContentLoaded', function () {
  setPoint(150)

  const clock = function () {
    const $hour = document.getElementById('hour'),
          $minute = document.getElementById('minute'),
          $second = document.getElementById('second');

    tick()
    setInterval(tick, 1000)

    function tick() {
      let now = new Date()
      let hour = now.getHours(),
          minute = now.getMinutes(),
          second = now.getSeconds();
      let secondRotate = second * 6,
          minuteRotate = minute * 6,
          hourRotate = hour * 30 + minute / 2;
      setTransform($hour, 'rotate('+ hourRotate +'deg)')
      setTransform($minute, 'rotate('+ minuteRotate +'deg)')
      setTransform($second, 'rotate('+ secondRotate +'deg)')
      document.querySelector('.datetime').innerHTML = `${zero(hour)} : ${zero(minute)} : ${zero(second)}`
    }
  }()
}, false)

function setPoint(r) {
  let $dotEls = '', classname = '';
  for(let i = 0; i < 60; i++) {
    let rad = 2 * Math.PI / 60 * i
    let x = r * Math.cos(rad),
        y = r * Math.sin(rad)
    classname = i%5 === 0 ? 'h' : 'm'
    $dotEls += `<i class="${classname}" style="top:${r + y + 7}px;left: ${r + x + 7}px"></i>`
  }
  document.querySelector('.time').innerHTML = $dotEls
}

function setTransform(el, value) {
  if (typeof el === 'string') {
    el = document.querySelector(el)
  }
  el.style.webkitTransform = value
  el.style.transform = value
}

function zero (num) {
  return num > 9 ? num : '0' + num
}

<div class="clock-box">
  <div class="clock">
    <div class="time"></div>
    <i class="hour" id="hour"></i> 
    <i class="minute" id="minute"></i>
    <i class="second" id="second"></i>  
    <i class="dot"></i>
  </div>
</div>
<div class="datetime"></div>

*{margin: 0; padding: 0; border: 0;}

html{
  font-size: 16px;
}

%center{
  position: absolute; top: 50%; left: 50%;
}
@mixin absolute ($top: 0, $right: 0, $bottom: 0, $left: 0) {
  position: absolute; top: $top+px; left: $left+ px;
  @if $right {right: $right+ px}
  @if $bottom {bottom: $bottom+ px}
}

.clock-box{
  margin: 50px auto;
  position: relative;
  box-sizing: border-box;
  width: 360px; height: 360px;
}

.clock{
  position: absolute; top: 50%; left: 50%; margin: -160px 0 0 -160px;
  box-sizing: border-box;
  width: 320px; height: 320px;
  font-size: 0;
  border-right: 1px solid #eee;
  border-top: 1px solid #eee;
  border-radius: 50%;
  background-color: #eee;
  background-image: linear-gradient(235deg, rgb(120, 120, 120), rgb(30, 30, 30) 40%);
  box-shadow: -5px 4px 8px rgba(0, 0, 0, .16);
  transform: rotate(-90deg) scale(0.5);

  &::before{
    content: "";
    @include absolute(10, 10, 10, 10);
    background-color: #fff;
    border-radius: 50%;
    box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, .38);
  }

  .hour{
    @extend %center; margin: -4px 0 0 -12px;
    width: calc(25% + 10px); height: 8px;
    background-color: rgb(0, 0, 0);
    border-radius: 5px;
    transform-origin: 12px 50%;
  }
  .minute{
    @extend %center;
    width: calc(50% - 20px); height: 6px; margin: -3px 0 0 -18px;
    background-color: rgb(0, 0, 0);
    border-radius: 3px;
    transform-origin: 18px 50%;
  }
  .second{
    @extend %center;
    width: 50%; height: 2px; margin: -1px 0 0 -25px;
    background-color: rgb(200, 0, 0);
    border-radius: 1px;
    transform-origin: 25px 50%;
  }
  .dot{
    @extend %center;
    transform: translate3d(-50%, -50%, 0);
    width: 6px; height: 6px;
    background-color: #fff;
    border-radius: 50%;
  }
  .time{
    @include absolute();
    transform: scale(.92);
    i{
      position: absolute;
      width: 4px; height: 4px;
      background-color: #f6f6f6;
      border-radius: 50%;
      &.h{
        width: 6px; height: 6px;
        background-color: #ccc;
      }
    }
  }
}

.datetime{
  text-align: center;
  font-size: 20px;
}