Hi folks,
After long time I’m back, I’m really sorry
about this two month delay. Because I’m really busy with my new job. By the
way, today I’m here to share some simple, but little bit tricky JavaScript
activity.
Develop a small JavaScript Timer, It’s
a really easy thing. Actually, this may be easier than develop a simple “Hello World!” printing
app.
setTimeout
This is the inbuilt method I use to
develop this simple timer. Actually, this method gets two
values as parameters. First, we need to pass a function name as a
first parameter, then we need to pass a time in the millisecond format to
mention execution time. In a simple word, setTimeout responsible for executing
the passed function after giving time.
Here we go! This is the tricky point
I use to build this simple web based timer, when page load I call the
onload event to execute the ‘steamer’ function, this function responsible for print
hours, minutes, seconds & milliseconds. After that recursively call it
again after 1 millisecond its own function again. At that time these
numeric values go thought some conditions for increase those values according
to corresponding time format.
Additionally, use ‘twoDigitConverter’
function use for converting numeric values into two digit value.
That’s it, is that hard, actually
this is what I’m always believe in this field, ‘Software industry depends on
concepts & innovation thinking, instead of technology or resources’ isn’t
it……..
JavaScript code jegment
<script>
var hour = 0;
var minute = 0;
var seconds = 0;
var milliseconds = 0;
function setTimer()
{
if(milliseconds == 99)
{
milliseconds =0
if(seconds == 59)
{
seconds =0
if(minute == 59)
{
minute =0
hour++;
}else
{
minute++;
}
}else
{
seconds++;
}
}else
{
milliseconds++;
}
document.getElementById('hour').innerHTML = twoDigitConverter(hour);
document.getElementById('minute').innerHTML = twoDigitConverter(minute);
document.getElementById('seconds').innerHTML = twoDigitConverter(seconds);
document.getElementById('milliseconds').innerHTML = milliseconds;
setTimeout("setTimer()", 10);
}
function twoDigitConverter(number)
{
var numberString = number+'';
if(numberString.length == 1)
{
numberString = '0'+number;
}
return (numberString);
}
</script>
CSS code segment
<style type="text/css">
body,td,th {
color: #FFF;
}
.TimerTheme{
font-family: Segoe UI Light;
background-color:#06F;
font-size:36px;
width:25%;
text-align:center;
}
</style>
HTML code segment
<body onload="setTimer()">
<table width="100%" border="0">
<tr>
<td><table width="50%" border="0" align="center">
<tr>
<td class="TimerTheme" id="hour" />
<td class="TimerTheme" id="minute" />
<td class="TimerTheme" id="seconds" />
<td class="TimerTheme" id="milliseconds" />
</tr>
</table></td>
</tr>
</table>
</body>
<table width="100%" border="0">
<tr>
<td><table width="50%" border="0" align="center">
<tr>
<td class="TimerTheme" id="hour" />
<td class="TimerTheme" id="minute" />
<td class="TimerTheme" id="seconds" />
<td class="TimerTheme" id="milliseconds" />
</tr>
</table></td>
</tr>
</table>
</body>
 |
| Final Result |
Regards,
Denuwan Himanga.
