JavaScript Analog Clock - JAVASCRIPT - Do It Yourself

Type in your code below

<html>
<head>
<style>
.clock-container *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.clock-container{
    width: 250px;
    height: 250px;
    background-color: #fff;
    position: relative;
    border-radius: 50%;
    border: 5px solid #36f;
    text-align: center;
    overflow: hidden;

}
.clock-container::before{
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    left: 50%;
    top: 50%;
    background: #36f;
    z-index: 10;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.clock-number{
    width: 100%;
    height: 100%;
    padding: 8px;
    position: absolute;   
}
.clock-number::after{
    content: "";
    position: absolute;
    width: 3px;
    height: 15px;
    background-color: #000;
    top: 13%;
}
.num1{
    transform: rotate(30deg);
 }
 .num1 div{
    transform: rotate(-30deg); 
 }
 .num2{
    transform: rotate(60deg);
 }
 .num2 div{
    transform: rotate(-60deg); 
 }
 .num3{
    transform: rotate(90deg);
 }
 .num3 div{
    transform: rotate(-90deg); 
 }
 .num4{
    transform: rotate(120deg);
 }
 .num4 div{
    transform: rotate(-120deg); 
 }
 .num5{
    transform: rotate(150deg);
 }
 .num5 div{
    transform: rotate(-150deg); 
 }
 .num6{
    transform: rotate(180deg);
 }
 .num6 div{
    transform: rotate(-180deg); 
 }
    .num7{
    transform: rotate(210deg);
 }
 .num7 div{
    transform: rotate(-210deg); 
 }
 
 .num8{
    transform: rotate(240deg);
 }
 .num8 div{
    transform: rotate(-240deg); 
 }

.num9{
    transform: rotate(270deg);
 }
 .num9 div{
    transform: rotate(-270deg); 
 }
 .num10{
    transform: rotate(300deg);
 }
 .num10 div{
    transform: rotate(-300deg); 
 }
 .num11{
    transform: rotate(330deg);
 }
 .num11 div{
    transform: rotate(-330deg); 
 }
 .clock-hand{
     width: 100%;
     height: 100%;
     position: absolute;
 }
 .clock-hand >div{
     left: 50%;
     bottom: 50%;
     transform: translateX(-50%);
     position: absolute;
 }
 .clock-hand .second{
width: 1px;
height: 32%;
background-color: #36f;
 }
 .clock-hand .second::after
 {
         content: "";
    position: absolute;
     border-style: solid;
     border-width: 3px;
     top: -6px;
     left:50%;
     transform: translateX(-50%);
     border-color: transparent transparent #36f transparent;
 }

.minute{
    width: 4px;
    height: 30%;
    display: block;
    background-color: #000 !important;
    border-radius: 5px;

}.hour{
    width: 8px;
    height: 20%;
    border-radius: 5px;
    display: block;
    background-color: #000 !important;

}

.reading{
    position: absolute;
    width:20px;
    color: #fff;
  line-height: 20px;
    top: 70%;
    left: 50%;
    transform: translateX(-50%);
    overflow:hidden;
    background: #36f;
    font-size: 12px;
    text-align: center;
    z-index: 200;
}
 </style>
</head>
<body>
<div class="clock-container">
<div class="reading"></div>
<div class="clock-number num1"><div class="">1</div></div>
<div class="clock-number num2"><div class="">2</div></div>
<div class="clock-number num3"><div class="">3</div></div>
<div class="clock-number num4"><div class="">4</div></div>
<div class="clock-number num5"><div class="">5</div></div>
<div class="clock-number num6"><div class="">6</div></div>
<div class="clock-number num7"><div class="">7</div></div>
<div class="clock-number num8"><div class="">8</div></div>
<div class="clock-number num9"><div class="">9</div></div>
<div class="clock-number num10"><div class="">10</div></div>
<div class="clock-number num11"><div class="">11</div></div>
<div class="clock-number num12"><div class="">12</div></div>
<div class="clock-hand" id="sec"><div class="second"></div></div>
<div class="clock-hand" id="min"><div class="minute"></div></div>
<div class="clock-hand" id="hr"><div class="hour"></div></div>
</div>
<script>

function clockRotate(){
    var getMinHand=document.querySelector("#min");
    var getSecHand=document.querySelector("#sec");
    var getHrHand=document.querySelector("#hr");

var getDate=new Date();
    var getSecond=getDate.getSeconds() /60;
    var getMinute=getDate.getMinutes()/60;
    var getHour=getDate.getHours()/12;

getSecHand.style.transform="rotate(" + (getSecond*360) + "deg)";
    getMinHand.style.transform="rotate(" + (getMinute*360) + "deg)";
    getHrHand.style.transform="rotate(" + (getHour*360) + "deg)";
    document.querySelector(".reading").innerHTML=getDate.getSeconds();
    
    setTimeout(clockRotate , 1000);
}
window.onload = clockRotate
   </script>
</body></html>

Related Chapters

Related Examples