Clock

by Andrey Izman

HTML

<div class="timer_bg">
  <div class="digit_clock">
    <div id="clock1" class="clock_disk">
      <div class="clock-wrap">
        <div class="hourhand"></div>
        <div class="minutehand"></div>
        <div class="secondhand"></div>
        <div class="clock-center-dot"></div>
      </div>
    </div>
  </div>
</div>

CSS

.clock_disk {
  position: relative;
  width: 112px;
  height: 112px;
  margin: auto;
  display: block;
  padding: 0;
  border: 8px solid rgba(0, 68, 90, 0.2);
  border-radius: 50%;
  box-sizing: content-box;
  text-align: center;
}

.clock-wrap {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

.hourhand,
.minutehand,
.secondhand,
.clock-center-dot {
  position: absolute;
  width: 4%;
  top: 0%;
  left: 48%;
  height: 100%;
}

.clock-wrap .minutehand {
  background-position: 96.2% 100%;
}

.clock-wrap .secondhand {
  background-position: 100% 100%;
  transition: transform 250ms cubic-bezier(0.5, -1, 0.5, 2);
}

.clock-wrap .clock-center-dot {
  background-position: 89.2% 100%;
}

.clock-wrap .hourhand {
  background-position: 93% 100%;
}

.clock-wrap,
.hourhand,
.minutehand,
.secondhand,
.clock-center-dot {
  background:...

JavaScript

/**
 * Created by Alaksander on 30.08.2018.
 */
function Clock(id) {
  const clock = $("#" + id);

  const hourhand = clock.find(".hourhand");
  const minutehand = clock.find(".minutehand");
  const secondhand = clock.find(".secondhand");

  const clockObj = {
    hourhand: hourhand,
    minutehand: minutehand,
    secondhand: secondhand,
    secValue: null
  };
  clockObj.setTime = function(h, m, s) {
    var minAngle;
    if (typeof s === "undefined" || s === false) {
      minAngle = m * 6;
      secondhand.hide();
    } else {
      minAngle = m * 6 + s * (360 / 3600);
      if (this.secValue === null) {
        this.secValue = s * 6;
        this.minutehand.css('transform', 'rotate(' + minAngle + 'deg)');
      } else {
        this.secValue += 6;
      }
      this.secondhand.css('transform', 'rotate(' + this.secValue + 'deg)');
    }

    var hourAngle = h * 30 + m * (360 / 720);

    if (s % 5 === 0 || (typeof s === "undefined" || s === false)) {
      this.minutehand.css('transform', 'rotate(' + minAngle + 'deg)');
    }

    this.hourhand.css('transform', 'rotate(' + hourAngle + 'deg)');
  };

  return clockObj;
}


var clocks = Clock("clock1");

setTimeout(function tick() {
  const time1 = new Date();
  clocks.setTime(time1.getHours(), time1.getMinutes(), time1.getSeconds());

  console.log('tick')
  setTimeout(tick, 1000);
}, 0);