/    Sign up×
Community /Pin to ProfileBookmark

Stop watch

Copy linkTweet thisAlerts:
Apr 06.2009

I am trying to find a javascript stopwatch that I can include in a html page. I have found some but they all show the timer in a text input field and I would like to place the counter in the document and format it with css. It just needs to have a start/stop and reset button and count up in seconds.

Can anyone help me (I’m just beginning to learn js)?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KorApr 07.2009 — Could be something like this:
<i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;untitled&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;style type="text/css"&gt;
.black {
color: #000000;
}
.red {
color: #FF0000;
}
&lt;/style&gt;
&lt;script type="text/javascript"&gt;
var setT;
function startWatch(f){
var span=document.getElementById('myspan');
span.className='black';
var h=Number(f['hours'].value), m=Number(f['minutes'].value), s=Number(f['seconds'].value);
countDown(h,m,s)
}
function countDown(h,m,s){
var span=document.getElementById('myspan');
var HH=h&lt;10?'0'+h:h;
var MM=m&lt;10?'0'+m:m;
var SS=s&lt;10?'0'+s:s;
span.innerHTML=HH+':'+MM+':'+SS;
if(h==0&amp;&amp;m==0&amp;&amp;s==0){span.className='red';return}
s--;
if(s&lt;0){s=59;m--}
if(m&lt;0){m=59;h--}
setT=setTimeout(function(){countDown(h,m,s)},1000)
}
function stopWatch(){
clearTimeout(setT);
}
function validNumber(box){//removes any characater except for digits
box.value=box.value.replace(/D/g,'');
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form action=""&gt;
&lt;input type="text" name="hours" onkeyup="validNumber(this)" onblur="validNumber(this)"&gt; Input hours
&lt;br&gt;
&lt;input type="text" name="minutes" onkeyup="validNumber(this)" onblur="validNumber(this)"&gt; Input minutes
&lt;br&gt;
&lt;input type="text" name="seconds" onkeyup="validNumber(this)" onblur="validNumber(this)"&gt; Input seconds
&lt;br&gt;
&lt;br&gt;
&lt;input type="button" value="Start" onclick="startWatch(this.form)"&gt;
&lt;input type="button" value="Stop" onclick="stopWatch()"&gt;
&lt;br&gt;
&lt;br&gt;
&lt;span id="myspan" class="black"&gt;00:00:00&lt;/span&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@akraymondhauthorApr 07.2009 — Yeah, that's close! I need it to count up and don't need any data entry.

Thanks a ton!
Copy linkTweet thisAlerts:
@KorApr 08.2009 — <i>
</i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;untitled&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta http-equiv="Content-Style-Type" content="text/css"&gt;
&lt;meta http-equiv="Content-Script-Type" content="text/javascript"&gt;
&lt;script type="text/javascript"&gt;
var setT, h, m, s;
function startWatch(b){
var span=document.getElementById('myspan');
var HH=h&lt;10?'0'+h:h;
var MM=m&lt;10?'0'+m:m;
var SS=s&lt;10?'0'+s:s;
span.innerHTML=HH+':'+MM+':'+SS;
if(!b){stopWatch();return}
s++;
if(s==60){s=0;m++}
if(m==60){m=0;h++}
setT=setTimeout(function(){startWatch(b)},1000)
}
function stopWatch(){
clearTimeout(setT);
}
function resetWatch(){
h=0; m=0; s=0;
startWatch(false)
}
onload=resetWatch
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form action=""&gt;

&lt;input type="button" value="Start" onclick="startWatch(true)"&gt;
&lt;input type="button" value="Stop" onclick="stopWatch()"&gt;
&lt;input type="button" value="Reset" onclick="resetWatch()"&gt;
&lt;br&gt;
&lt;br&gt;
&lt;span id="myspan"&gt;&lt;/span&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@akraymondhauthorApr 08.2009 — That's it, thanks!!

I'm doing my best to learn this as fast as possible. I have an idea for an application for the Palm Pre when it comes out and this is one small piece of it. Now I just to figure out database connections...
×

Success!

Help @akraymondh spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...