Create an Analog Clock using HTML, CSS and jQuery

In this article, we are going to learn to create/develop a working analog clock using HTML, CSS and jQuery.

The basic login in this analog clock lies in the fact that a complete one round is equivalent to 360 degrees. The position of hour hand, minute hand and second hand are determined accordingly.

Full Source Code :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>	
<style type="text/css">
  body{
    background: #ddd;
  }

  section {
      width: 80vmin;
      height: 80vmin;
      margin: auto;
      background: #fff;
      border: 3vmin solid #000;
      border-radius: 50%;
      margin-top: 3vmin;
      box-shadow: 
          inset 40px 40px 90px rgba(0,0,0,.2),
          inset 10px 10px 30px rgba(0,0,0,.5), 
          20px 20px 30px rgba(0,0,0,.4),
          40px 40px 60px rgba(0,0,0,.4);
      position: relative;
      z-index: 1;
  }

  section:before {
      content: '';
      width: 95%;
      height: 95%;
      border-radius: 50%;
      display: block;
      background: transparent;
      border: 2vmin solid white;
  }

  section:after {
      content: '';
      width: 105%;
      height: 105%;
      border-radius: 50%;
      display: block;
      background: transparent;
      position: absolute;
      top: -2.5%;
      left: -2.5%;
      box-shadow: -3px -3px 9px rgba(255,255,255,.8);
  }

  .label {
      position: absolute;
      top: 19vmin;
      left: 46%;
      font-size: 2.5vmin;
  }

  .hourhand,
  .secondhand,
  .minutehand {
      width: 25vmin;
      height: 2vmin;
      background: #000;
      position: absolute;
      top: 40vmin;
      left: calc(50% - 3.5vmin);
      z-index: 2;
      transform: rotate(-139deg);
      transform-origin: 16%;
      display: none;
  }

  .hourhand:after,
  .secondhand:after,
  .minutehand:after {
      content: '';
      background: #000;
      width: 5vmin;
      height: 5vmin;
      border-radius: 50%;
      z-index: 3;
      position: absolute;
      top: -1.5vmin;
      left: 1.5vmin;
  }

  .hourhand {
      border-top-right-radius: 20%;
      border-bottom-right-radius: 20%;
      box-shadow: -10px 0px 10px rgba(0,0,0,.4);
  }

  .minutehand {
      width: 40vmin;
      height: 1vmin;
      top: 40.5vmin;
      transform: rotate(-39deg);
      transform-origin: 10%;
      border-top-right-radius: 30%;
      border-bottom-right-radius: 30%;
      box-shadow: -10px 10px 10px rgba(0,0,0,.4);
  }

  .minutehand:before {
        content: '';
        width: 4.5vmin;
        height: 4.5vmin;
        border-radius: 50%;
        z-index: 99;
        position: absolute;
        top: -1.7vmin;
        left: 1.7vmin;
        box-shadow: -2px -2px 7px rgba(255,255,255,.6);
    }

  .minutehand:after {
      top: -2vmin;
  }

  .secondhand {
      width: 35vmin;
      height: .5vmin;
      top: 40.75vmin;
      transform: rotate(160deg);
      transform-origin: 11.5%;
      box-shadow: -10px -10px 10px rgba(0,0,0,.4);
  }
  .secondhand:after {
      top: -2.25vmin;
  }

  .hour12,
  .hour1,
  .hour2,
  .hour3,
  .hour4,
  .hour5 {
      height: 1vmin;
      width: 55vmin;
      background: transparent;
      border-left: 7vmin solid #000;
      border-right: 7vmin solid #000;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
      position: absolute;
  }

  .hour3 { transform: rotate(90deg) translate(0, 34vmin); }

  .hour1 { transform: rotate(120deg) translate(17vmin, 30vmin); }

  .hour2 { transform: rotate(150deg) translate(29vmin, 18vmin); }

  .hour4 { transform: rotate(210deg) translate(30vmin, -17vmin); }

  .hour5 { transform: rotate(240deg) translate(17vmin, -30vmin); }
</style>

<section>
    <div class="label">ROLEX</div>
    <div class="hourhand"></div>
    <div class="secondhand"></div>
    <div class="minutehand"></div>
    <div class="hour12"></div>
    <div class="hour1"></div>
    <div class="hour2"></div>
    <div class="hour3"></div>
    <div class="hour4"></div>
    <div class="hour5"></div>
</section>	

<script type="text/javascript">
  setInterval(function(){
    setTime();
  },1000);

  setTimeout(function(){
    $(".minutehand").slideDown();
    $(".secondhand").slideDown();
    $(".hourhand").slideDown();
  },1100);

  function setTime(){
    var d = new Date();
    var seconds = d.getSeconds();
    var minutes = d.getMinutes();
    var hours = d.getHours();

    hour_degree = minutes/60*30;

    second_degree = 270 + (seconds*6);
    $(".secondhand").css('transform','rotate('+second_degree+'deg)');

    minute_degree = 270 + (minutes*6);
    $(".minutehand").css('transform','rotate('+minute_degree+'deg)');

    $(".hourhand").css('transform','rotate('+hour_degree+'deg)');
  }
</script>

 

Follow this video for complete guidance :

Design Reference : https://codepen.io/nilsynils/pen/EZzyVB