Wednesday, 5 March 2014

HTML5 Clock-3 [Code]

Creating a simple html clock using html, css and javascript

<html>
<head>
<style>
...
</style>
</head>
<body onload="runclock()">
<div class="cbg"></div>
<div id="clock" class="clock"></div>
<div id="min" class="min"></div>
<div id="day" class="day"></div>
<div id="date"></div>
<div id="sec" class="sec"></div>
<div id="sr1" class="sr" style="background:orange;"></div>
<div id="sr2" class="sr" style="background:yellow;"></div>
<div id="sr3" class="sr" style="background:lime;"></div>
<div id="sr4" class="sr" style="background:red;"></div>
<script>
...
</script>
</body>
</html>


The style part is:

.clock
{
    width:500px;
    height:500px;
    position:absolute;
    left:300px;
    top:100px;
    font-family:YouMurderer BB;
    font-size:300px;
    text-align:center;
    color:#900000;
    text-shadow:2px 2px black;
}

.min
{
    width:500px;
    height:500px;
    position:absolute;
    left:450px;
    top:150px;
    font-family:YouMurderer BB;
    font-size:250px;
    text-align:center;
    color:#b64500;
    text-shadow:2px 2px black;
}

.cbg
{
    width:500px;
    height:500px;
    border-radius:250px;
    position:absolute;
    left:300px;
    top:50px;
}

.day
{
    width:150px;
    height:150px;
    position:absolute;
    left:475px;
    top:100px;
    font-family:YouMurderer BB;
    font-size:100px;
    text-align:center;
    color:#009315;
    text-shadow:2px 2px black;
}

#date
{
    width:150px;
    height:150px;
    position:absolute;
    left:400px;
    top:120px;
    font-family:YouMurderer BB;
    font-size:150px;
    text-align:center;
    color:#00f6ff;
    text-shadow:2px 2px black;
}

.sec
{
    width:150px;
    height:150px;
    position:absolute;
    left:575px;
    top:250px;
    font-family:YouMurderer BB;
    font-size:150px;
    text-align:center;
    color:#ffde00;
    text-shadow:2px 2px black;
}
.sr
{
    position:absolute;
    left:300px;
    top:50px;
    width:20px;
    height:100px;
    background:red;
}

@keyframes secrun1
{
    0%{top:50px;left:300px;transform:rotate(0deg);}
    100%{top:400px;left:300px;transform:rotate(90deg);}
}

@keyframes secrun2
{
    0%{top:400px;left:300px;transform:rotate(90deg);}
    100%{top:400px;left:900px;transform:rotate(0deg);}
}

@keyframes secrun3
{
    0%{top:400px;left:900px;transform:rotate(0deg);}
    100%{top:50px;left:900px;transform:rotate(90deg);}
}

@keyframes secrun4
{
    0%{top:50px;left:900px;transform:rotate(90deg);}
    100%{top:50px;left:300px;transform:rotate(0deg);}
}


Script part is:

function runclock()
{
    var t = new Date();
    var h = t.getHours();
    var m = t.getMinutes();
    var s = t.getSeconds();
    var sec=s;
    var d = t.getDay();
    var da=t.getDate();
    d=day(d);
    m=putzero(m);
    h=format(h);
    h=putzero(h);
    da=putzero(da);
    s=putzero(s);

    //create animation

    if(sec%4==0)
    { 
        document.getElementById('sr1').style.animation="secrun1 1s";
        document.getElementById('sr2').style.animation="secrun2 1s";
        document.getElementById('sr3').style.animation="secrun3 1s";
        document.getElementById('sr4').style.animation="secrun4 1s";
    }

    else  if(sec%4==1)
    {
        document.getElementById('sr1').style.animation="secrun2 1s";
        document.getElementById('sr2').style.animation="secrun3 1s";
        document.getElementById('sr3').style.animation="secrun4 1s";
        document.getElementById('sr4').style.animation="secrun1 1s";
    }

    if(sec%4==2) 
    {
        document.getElementById('sr1').style.animation="secrun3 1s";
        document.getElementById('sr2').style.animation="secrun4 1s";
        document.getElementById('sr3').style.animation="secrun1 1s";
        document.getElementById('sr4').style.animation="secrun2 1s";
    }

    else  if(sec%4==3)
    {
        document.getElementById('sr1').style.animation="secrun4 1s";
        document.getElementById('sr2').style.animation="secrun1 1s";
        document.getElementById('sr3').style.animation="secrun2 1s";
        document.getElementById('sr4').style.animation="secrun3 1s";
    }

//Display Clock
    setTimeout(function(){runclock()},500);
    document.getElementById('clock').innerHTML=h;
    document.getElementById('min').innerHTML=m;
    document.getElementById('day').innerHTML=d;
    document.getElementById('date').innerHTML=da;
    document.getElementById('sec').innerHTML=s;
}

function putzero(i)
{
    if(i<10)
    {
        i="0"+i;
    }
    return i;
}

function format(j)
{
    if(j>12)
    {
        j=j-12;
    }
    return j;
}


function day(k)
{
    switch(k)
    {
        case 0:k="SUN";
        break;
        case 1:k="MON";
        break;
        case 2:k="TUE";
        break;
        case 3:k="WED";
        break;
        case 4:k="THU";
        break;
        case 5:k="FRI";
        break;
        case 6:k="SAT";
        break;
    }
    return k;
}