HTML
CSS
PHP
Deno
Examples
Do It Yourself
Blog
Type in your code below
Run
<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
HTML JavaScript
Related Examples
JavaScript Toggle Image Source Intro