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