Thursday 4 September 2014

Stopwatch using Javascript - part 1

This time I would like to share a simple start for the javascript.
Just follow the steps below to get started with javascript :-
1) Open an editor (notepad, notepad++, etc)
2) Paste the following code at the editor

<html>
<head>
<script language = "javascript">
var msec=0,sec=0,min=0;
function fnWatch()
{
msec++;
if(msec==100)
{
msec=0;
sec++;
if(sec==59)
{
sec=0;
min++;
if(min==59)
{min=0;
}
}
}
ID = window.setTimeout("fnWatch();",10);
document.form1.txt1.value=min+" : "+sec+" : "+msec;
}
</script>
</head>
<body>
<form name = "form1">
<h1>Javascript stopwatch</h1>
<input type = "text" name = "txt1">
<br/><br/>
<input type = "button" name = "Start" value = "Start" onClick = "fnWatch()" >
<input type = "button" name = "Stop" value = "Stop" onClick = "window.clearTimeout(ID)">
</form>
</body>
</html>

3) Save as.. <anyname>.html
4) Run the script by double clicking at the <anyname>.html 
5) Start the stopwatch... you can try to challenge yourself by adding reset button to reset the counter
Click start to start the counter

Counter is running

6) Basically the concept is not much different from other programming  language such as C, Java, C#, etc.. For someone who already know one of the programming language, but still haven't try javascript before, hopefully this tutorial will give an idea to start learning javascript. All da best.


No comments:

Post a Comment