How to create an Analog Clock using HTML5 CSS3 and JavaScript

Web Project

Next →

In this project we will learn to create an analog clock using HTML5, CSS3 and JavaScript for our blog and website. This is an Open Source project and hence you can use this clock in your website as well.

Click here to learn to create digital and analog clock for your blog and website using dyClockJS.

Requirement

For this project we can use any text editor like Notepad++, SublimeText, gEdit, TextMate, Coda, Brackets etc.

In the above video Brackets has been used which is an open source software and can be downloaded from their website brackets.io

Files

For this project we will need three files namely

  • index.html
  • script.js
  • style.css

index.html


<!DOCTYPE html>
<html>
    <head>
        <title>Analog Clock</title>
        <script type="text/javascript" src="script.js"></script>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="analog-clock">
            <svg width="140" height="140">
                <circle id="clock-face" cx="70" cy="70" r="65" />
                <line id="h-hand" x1="70" y1="70" x2="70" y2="38" />
                <line id="m-hand" x1="70" y1="70" x2="70" y2="20" />
                <line id="s-hand" x1="70" y1="70" x2="70" y2="12" />
                <line id="s-tail" x1="70" y1="70" x2="70" y2="56" />
                <text x="62" y="18">12</text>
                <text x="126" y="76">3</text>
                <text x="66" y="130">6</text>
                <text x="7" y="76">9</text>
            </svg>
            <div class="time-text">
                <span id="hr">00</span>
                <span>:</span>
                <span id="min">00</span>
                <span>:</span>
                <span id="sec">00</span>
                <span id="suffix">--</span>
            </div>
        </div>
    </body>
</html>

script.js


function clock(){
    //calculate angle
    var d, h, m, s;
    d = new Date;
    
    h = 30 * ((d.getHours() % 12) + d.getMinutes() / 60);
    m = 6 * d.getMinutes();
    s = 6 * d.getSeconds();
    
    //move hands
    setAttr('h-hand', h);
    setAttr('m-hand', m);
    setAttr('s-hand', s);
    setAttr('s-tail', s+180);
    
    //display time
    h = d.getHours();
    m = d.getMinutes();
    s = d.getSeconds();
    
    if(h >= 12){
        setText('suffix', 'PM');
    }else{
        setText('suffix', 'AM');
    }
    
    if(h != 12){
        h %= 12;
    }
    
    setText('sec', s);
    setText('min', m);
    setText('hr', h);
    
    //call every second
    setTimeout(clock, 1000);
    
};

function setAttr(id,val){
    var v = 'rotate(' + val + ', 70, 70)';
    document.getElementById(id).setAttribute('transform', v);
};

function setText(id,val){
    if(val < 10){
        val = '0' + val;
    }
    document.getElementById(id).innerHTML = val;
};

window.onload=clock;

style.css


*{
    margin:0;
    padding:0;
    font-family:sans-serif;
    font-size:14px;
}

.analog-clock{
    width:140px;
    height:140px;
}

#clock-face{
    stroke:black;
    stroke-width:2px;
    fill:white;
}

#h-hand, #m-hand, #s-hand, #s-tail{
    stroke:black;
    stroke-linecap:round;
}

#h-hand{
    stroke-width:3px;
}

#m-hand{
    stroke-width:2px;
}

#s-hand{
    stroke-width:1px;
}

.time-text{
    text-align:center;
}
Next →