Tuesday, 12 June 2018

How to create Analog Clock & Digital Clock using HTML5, CSS3 and JavaScript for website.

How to create Analog Clock & Digital Clock using HTML5, CSS3 and JavaScript for website.


Hello Friends, in this post i will create an Analog Clock and Digital Clock using HTML5, CSS3 and JavaScript .


You can create Clock by watching my Video tutorial link is below....






Yout Need Files:



For this project we will need three files namely

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


Index.html:


........................................................................


<!DOCTYPE html>
<html>
    <head>
        <title>Advance Analog Clock</title>
        <script type="text/javascript" src="script.js"></script>
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
<div style="background-color:lightblue; text-align:center">
        <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>
<h1>Digital Time:</h1>
            <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>
</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:yellow;
}

#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;
}
..................................................................................


Output:



Thank You for visit

1 comment:

  1. These are really amazing and valuable websites you have share with us. Thanks for the informative post.
    WordPress development company in Chennai

    ReplyDelete

Popular Posts