Welcome to the PROBETEMPLATEs where dream comes true. Dive now!

How to create a analog clock in html, css

Analog clock with html and css
Mashiur Rahman
Let's create a analog clock using css

First of all we need to a compiler like vs code or any other html compiler.

Then create a new file called index.html

Further then write this below code as index.html

Double click to copy

Then add css as styles.css
Then add javascript as script.js
<div class="clock"
        <div class="hour">
            <div class="hr" id="hr">

            </div>
        </div>
        <div class="min">
            <div class="mn" id="mn">
                
            </div>
        </div>
        <div class="sec">
            <div class="sc" id="sc">
                
            </div>
        </div>
    </div>

    <div class="toggle">
        <input type="checkbox" id="toggle" />
        <label for="toggle"></label>
      </div>

</div>
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background:#000000;
}
body.light
{
background: #d1dae3;
}
.clock
{
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(clock.png);
    background-size: cover;
    border: 4px solid #9e0000;
    border-radius: 50%;
    box-shadow: 0 -15px 15px rgba(255, 0, 0, 0.05),
               inset   0 -15px 15px rgba(255, 0, 0, 0.05),
               0 -15px 15px rgba(255, 0, 0, 0.3),
               inset 0 -15px 15px rgba(255, 0, 0, 0.3);
}
body.light .clock{
    background:  #d1dae3 url(clock.png);
    background-size: cover;
    border: 4px solid #cad3dc;
    box-shadow: -8 -8px 15px rgba(255,255,255, 0.5),
                10 10px 10px rgba(0,0,0, 0.3),
               inset   -8 -8px 15px rgba(255,255,255, 0.5),
   
                inset 10 10px 10px rgba(0,0,0, 0.3);
}
body.light .clock::before {
    background: #008eff;
}
.clock::before
{
    content:'';
    position: absolute;
    width: 15px;
    height: 15px;
   
  background: #fff;
    z-index: 100000;
    border-radius: 50%;
}
.clock .hour,
.clock .min,
.clock .sec
{
position: absolute;
}
.clock .hour, .hr
{
width: 160px;
height: 160px;
}
.clock .min, .mn
{
width: 190px;
height: 190px;
}
.clock .sec, .sc
{
width: 230px;
height: 230px;
}
.hr,.mn,.sc
{
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hr::before
{
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background: #ff105e;
    z-index: 10;
    border-radius: 6px 6px 0 0;
}
body.light .mn::before{
    background: black;
}
.mn::before
{
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background: #fff;
    z-index: 11;
    border-radius: 6px 6px 0 0;
}
.sc::before
{
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background: #ff6767;
    z-index: 12;
    border-radius: 6px 6px 0 0;
}
.toggle{
    position: absolute;
top: 30px;
right: 150px;
width: 20px;
height: 20px;
cursor: pointer;
}
.toggle input[type=checkbox] {
    display: none;
  }
  
  .toggle label {
    background-color: rgb(255, 255, 255);
    border: 2px solid rgb(55, 55, 55);
    border-radius: 50px;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: all ease-in-out 0.3s;
    width: 50px;
    height: 30px;
  }
  
  .toggle label::after {
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    content: ' ';
    cursor: pointer;
    display: inline-block;
    position: absolute;
    left: 2px;
    top: 2px;
    transition: all ease-in-out 0.3s;
    width: 22px;
    height: 22px;
  }
  
  .toggle input[type=checkbox]:checked ~ label {
    background-color: #fc0000;
    border-color: #c90000;
  }
  
  .toggle input[type=checkbox]:checked ~ label::after {
    background-color: #000000;
    transform: translateX(20px);
  }

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(255, 23, 23);
    color: white;
    text-align: center;
  }

  a {
    color: rgb(0, 0, 0);
}

a:hover {
    color: r
    
gb(255, 255, 255);}
const toggle = document.getElementById('toggle');
const body = document.body;

toggle.addEventListener('input', (e) => {
  const isChecked = e.target.checked;
  
  if(isChecked) {
    body.classList.add('light');
  } else {
    body.classList.remove('light');
  }
});
        const deg = 6 ;
        const hr = document.querySelector("#hr");
        const mn = document.querySelector("#mn");
        const sc = document.querySelector("#sc");
        setInterval(() => {
            let day = new Date();
            let hh = day.getHours() * 30;
            let mm = day.getMinutes() * deg;
            let ss = day.getSeconds() * deg;
         hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
        mn.style.transform = `rotateZ(${mm}deg)`;
        sc.style.transform = `rotateZ(${ss}deg)`;
       
        })

تعليق واحد

  1. https://probetemplates.blogspot.com/2024/02/how-to-create-analog-clock-in-html-css.html
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.