Ceas Analogic

by MariusNastasa

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>

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

JavaScript

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;