Saturday, 23 March 2013

JavaScript digital clock

JAVASCRIPT,CSS  DIGITAL CLOCK

Working demo:


Javascript CSS Digital Clock






This looks cool yet very easy to code.
Here comes the magical code that does this


<h2>Javascript CSS Digital Clock </h2>
<div id="clockDisplay" class="clockStyle"></div>
<script type="text/javascript" language="javascript">
function renderTime() { var currentTime = new Date(); 
 var suf = "AM";
 var h = currentTime.getHours();
 var m = currentTime.getMinutes();
 var s = currentTime.getSeconds(); 
 setTimeout('renderTime()',1000);
 if (h == 0) { h = 12; }
 else if (h > 12) 
{ h = h - 12; suf="PM"; }
 if (h < 10) { h = "0" + h; }
 if (m < 10) { m = "0" + m; }
 if (s < 10) { s = "0" + s; }
 var myClock = document.getElementById('clockDisplay'); 
 myClock.innerHTML = h + ":" + m + ":" + s + " " + suf; }
 renderTime(); 
</script>

No comments:

Post a Comment