Stopwatch/ Timer

bunion · 12-24-2004, 12:58 AM

Hi. i want to create a countdown timer from 3 minutes that could possibly make a sound when the time is up. There just needs to be a start/reset button(s). Plus multiple timers, about 3 or 4. A bonus would be the ability to write a name next a timer so you could remember which is which.
Sorry, im not anyone to write something for me just tell me if this is possible and where to find code. Ive looked everywhere.
Many Thanks

coothead · 12-24-2004, 07:40 PM

Hi there bunion,

here is one that I made today. It will work for times of up to an hour

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>countdown script</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
     background:#999;
     margin-top:4em;
 }
#container {
     width:18em;
     border:inset 2px #999;
     margin:auto;  
}
#container, label {
     font-family:arial;
     font-size:16px;
 }
form {
     font-family:courier;
     font-size:0.8em;
 }
#div1,#div2 {
     width:16em;
     border:inset 6px #999;
     background:#777;
     text-align:center;    
 }
#div1 {
     border-bottom:0px;
     margin:8px 8px 0px 9px;
 }
#div2 {
     border-top:0px;
     margin:0px 8px 8px 9px;
 }
.timer {
     width:1.8em; 
     margin:3px;
     background:#000;
     color:#fff;  
     text-align:center;  
 }
.butts {
     width:3.6em; 
     margin:3px; 
     background:#999;
     color:#333;  
 }

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

  var secs;
  var mins;
  var df=document.forms;
  var count;

function setFocus() {
   clearTimeout(count);
   df[0][1].focus(); 
}

function initiate() {
if((isNaN(df[0][1].value))||(df[0][1].value=="")||(df[0][1].value>59)||
   (isNaN(df[0][2].value))||(df[0][2].value=="")||(df[0][2].value>59)) {
alert("Please insert minutes and seconds\nwithin this range...\n\n0 - 59 minutes/seconds");
  df[0].reset();
  df[0][1].focus();
  return;
 }
else {
  secs=df[0][2].value;
  mins=parseFloat(Math.floor(secs/60)+df[0][1].value);
  secs=secs%60;
 }
setTimeout("countDown()",1000);
 }

function countDown() {
if((mins>0)&&(secs<1)) {
    mins=mins-1;
    secs=60;
 }
   secs--;   
if(mins<10) {
   df[0][1].value="0"+mins;
}
else {
   df[0][1].value=mins;
 }  
if(secs<10) {
   df[0][2].value="0"+secs;
 }
else{ 
   df[0][2].value=secs;
 }
if((secs<1)&&(mins<1)) {
 doYourStuff();
 return;
 }
count=setTimeout("countDown()",1000);
}

function doYourStuff() {
  alert("The countdown is completed.\n\nThe doYourStuff function is initiated");  
} 
//]]>
</script>

</head>
<body onload="setFocus()">

<form action="#">
<fieldset id="container">
<legend>countdown one</legend>
<div id="div1">
<label><input class="timer" type="text"/> mins. </label>
<label><input class="timer" type="text"/> secs. </label>
</div>
<div id="div2">
<input class="butts"type="button" value="start" onclick="initiate()"/>
<input class="butts" type="reset"onclick="setFocus()"/>
</div>
</fieldset>
</form>

</body>
</html>

coothead

bunion · 12-24-2004, 09:05 PM

thanks for the reply!! what you posted is alomost ideal!
Being a novice at javascript, but having a bit of expereince with Pascal (lol)
i am going to try and modify it so that there are multiple timers, with a box for the user to label each of them temporarily. then the time up message that is displayed will mention this label. Im gonna try this.

bunion · 12-24-2004, 09:07 PM

Do you know how i can make it to default to 3 mins? i definately wont be able to do that

thanks again

mark87 · 12-24-2004, 10:16 PM

Code:

<label><input class="timer" type="text" size="20" name="Min" value="3"/> mins. </label>
<label><input class="timer" type="text" size="20" name="Sec" value="0"/> secs. </label>

?

coothead · 12-24-2004, 10:36 PM

Hi there bunion,

I havemade some minor modifications and discarded those parts of the script which appeared superflous to your requirements.......I think

Check it out........

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>countdown script</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
     background:#999;
     margin-top:4em;
 }
#container {
     width:18em;
     border:inset 2px #999;
     margin:auto;  
}
#container, label {
     font-family:arial;
     font-size:16px;
 }
form {
     font-family:courier;
     font-size:0.8em;
 }
#div1,#div2 {
     width:16em;
     border:inset 6px #999;
     background:#777;
     text-align:center;    
 }
#div1 {
     border-bottom:0px;
     margin:8px 8px 0px 9px;
 }
#div2 {
     border-top:0px;
     margin:0px 8px 8px 9px;
 }
.timer {
     width:1.8em; 
     margin:3px;
     background:#000;
     color:#fff;  
     text-align:center;  
 }
.butts {
     width:3.6em; 
     margin:3px; 
     background:#999;
     color:#333;  
 }

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

  var secs;
  var mins;
  var df=document.forms;
  var count;

function initiate() {
  secs=df[0][2].value;
  mins=df[0][1].value;
setTimeout("countDown()",1000);
 }

function countDown() {
if((mins==0)&&(secs==0)) {
   df[0].reset(); 
   return;
 }
if((mins>0)&&(secs<1)) {
    mins=mins-1;
    secs=60;
 }
   secs--;   
if(mins<10) {
   df[0][1].value="0"+mins;
}
else {
   df[0][1].value=mins;
 }  
if(secs<10) {
   df[0][2].value="0"+secs;
 }
else{ 
   df[0][2].value=secs;
 }
if((secs<1)&&(mins<1)) {
 doYourStuff();
 return;
 }
count=setTimeout("countDown()",1000);
}

function doYourStuff() {
  alert("The countdown is completed.\n\nThe doYourStuff function is initiated");  
} 
//]]>
</script>

</head>
<body >

<form action="#">
<fieldset id="container">
<legend>countdown one</legend>
<div id="div1">
<label><input class="timer"value="03"readonly="readonly" type="text"/> mins. </label>
<label><input class="timer" value="00"readonly="readonly"type="text"/> secs. </label>
</div>
<div id="div2">
<input class="butts"type="button" value="start" onclick="initiate()"/>
<input class="butts" type="reset"onclick="clearTimeout(count)"/>
</div>
</fieldset>
</form>

</body>
</html>

coothead

bunion · 12-24-2004, 11:35 PM

thanks coothead....im almost there apart from 2 things! I hope you dont mind me modifying and using your great script so much! Below is the code with your changes and mine. I have added another box for a user to enter a name for each timer (ive copied the code to make 3). Ideally, in the windows message that is displayed when the time is up i would like to display this name. Eg 'Player1's time is up'. And thing number two which i cant seem to get round is getting this 'Player name' box to show in the same grey box above the mins and secs. I have tried but it seems to mess the countdown up.

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>3 Minute Timer</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#999;
margin-top:0;
}
#container {
width:18em;
border:inset 2px #999;
margin:0;
}
#container, label {
font-family:comic sans ms;
font-size:16px;
}
form {
font-family:comic sans ms;
font-size:0.8em;
}
#div1,#div2 {
width:16em;
border:inset 6px #999;
background:#777;
text-align:center;
}
#div1 {
border-bottom:0px;
margin:8px 8px 0px 9px;
}
#div2 {
border-top:0px;
margin:0px 8px 8px 9px;
}
.label {
width:11.7em;
margin:3px;
background:#000;
color:#FFFF00;
text-align:start;
}
.timer {
width:1.8em;
margin:3px;
background:#000;
color:#ffff00;
text-align:center;
}
.butts {
width:3.6em;
margin:3px;
background:#999;
color:#333;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var secs;
var mins;
var df=document.forms;
var count;
var player;

function initiate() {
secs=df[0][2].value;
mins=df[0][1].value;
setTimeout("countDown()",1000);
}

function countDown() {
if((mins==0)&&(secs==0)) {
df[0].reset();
return;
}
if((mins>0)&&(secs<1)) {
mins=mins-1;
secs=60;
}
secs--;
if(mins<10) {
df[0][1].value="0"+mins;
}
else {
df[0][1].value=mins;
}
if(secs<10) {
df[0][2].value="0"+secs;
}
else{
df[0][2].value=secs;
}
if((secs<1)&&(mins<1)) {
doYourStuff();
return;
}
count=setTimeout("countDown()",1000);
}

function doYourStuff() {
alert(" 's time is up!\n\n");
}
//]]>
</script>

</head>
<body >

<form action="#">
<fieldset id="container">
<legend>Countdown one</legend>
<div id="div1">
<label><input class="timer"value="03"readonly="readonly" type="text"/> mins. </label>
<label><input class="timer" value="00"readonly="readonly"type="text"/> secs. </label>
</div>
<div id="div2">
<input class="butts"type="button" value="start" onclick="initiate()"/>
<input class="butts" type="reset"onclick="clearTimeout(count)"/>
</div>
<div id="div3">
<label> Player Name: </label><input class="label" type="text"/>
</div>
</fieldset>
</form>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#999;
margin-top:0;
}
#container {
width:18em;
border:inset 2px #999;
margin:0;
}
#container, label {
font-family:comic sans ms;
font-size:16px;
}
form {
font-family:comic sans ms;
font-size:0.8em;
}
#div1,#div2 {
width:16em;
border:inset 6px #999;
background:#777;
text-align:center;
}
#div1 {
border-bottom:0px;
margin:8px 8px 0px 9px;
}
#div2 {
border-top:0px;
margin:0px 8px 8px 9px;
}
.label {
width:11.7em;
margin:3px;
background:#000;
color:#FFFF00;
text-align:start;
}
.timer {
width:1.8em;
margin:3px;
background:#000;
color:#ffff00;
text-align:center;
}
.butts {
width:3.6em;
margin:3px;
background:#999;
color:#333;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var secs;
var mins;
var df=document.forms;
var count;
var player;

function initiate() {
secs=df[0][2].value;
mins=df[0][1].value;
setTimeout("countDown()",1000);
}

function countDown() {
if((mins==0)&&(secs==0)) {
df[0].reset();
return;
}
if((mins>0)&&(secs<1)) {
mins=mins-1;
secs=60;
}
secs--;
if(mins<10) {
df[0][1].value="0"+mins;
}
else {
df[0][1].value=mins;
}
if(secs<10) {
df[0][2].value="0"+secs;
}
else{
df[0][2].value=secs;
}
if((secs<1)&&(mins<1)) {
doYourStuff();
return;
}
count=setTimeout("countDown()",1000);
}

function doYourStuff() {
alert(" 's time is up!\n\n");
}
//]]>
</script>

</head>
<body >

<form action="#">
<fieldset id="container">
<legend>Countdown Two</legend>
<div id="div1">
<label><input class="timer"value="03"readonly="readonly" type="text"/> mins. </label>
<label><input class="timer" value="00"readonly="readonly"type="text"/> secs. </label>
</div>
<div id="div2">
<input class="butts"type="button" value="start" onclick="initiate()"/>
<input class="butts" type="reset"onclick="clearTimeout(count)"/>
</div>
<div id="div3">
<label> Player Name: </label><input class="label" type="text"/>
</div>
</fieldset>
</form>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
body {
background:#999;
margin-top:0;
}
#container {
width:18em;
border:inset 2px #999;
margin:0;
}
#container, label {
font-family:comic sans ms;
font-size:16px;
}
form {
font-family:comic sans ms;
font-size:0.8em;
}
#div1,#div2 {
width:16em;
border:inset 6px #999;
background:#777;
text-align:center;
}
#div1 {
border-bottom:0px;
margin:8px 8px 0px 9px;
}
#div2 {
border-top:0px;
margin:0px 8px 8px 9px;
}
.label {
width:11.7em;
margin:3px;
background:#000;
color:#FFFF00;
text-align:start;
}
.timer {
width:1.8em;
margin:3px;
background:#000;
color:#ffff00;
text-align:center;
}
.butts {
width:3.6em;
margin:3px;
background:#999;
color:#333;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var secs;
var mins;
var df=document.forms;
var count;
var player;

function initiate() {
secs=df[0][2].value;
mins=df[0][1].value;
setTimeout("countDown()",1000);
}

function countDown() {
if((mins==0)&&(secs==0)) {
df[0].reset();
return;
}
if((mins>0)&&(secs<1)) {
mins=mins-1;
secs=60;
}
secs--;
if(mins<10) {
df[0][1].value="0"+mins;
}
else {
df[0][1].value=mins;
}
if(secs<10) {
df[0][2].value="0"+secs;
}
else{
df[0][2].value=secs;
}
if((secs<1)&&(mins<1)) {
doYourStuff();
return;
}
count=setTimeout("countDown()",1000);
}

function doYourStuff() {
alert(" 's time is up!\n\n");
}
//]]>
</script>

</head>
<body >

<form action="#">
<fieldset id="container">
<legend>Countdown Three</legend>
<div id="div1">
<label><input class="timer"value="03"readonly="readonly" type="text"/> mins. </label>
<label><input class="timer" value="00"readonly="readonly"type="text"/> secs. </label>
</div>
<div id="div2">
<input class="butts"type="button" value="start" onclick="initiate()"/>
<input class="butts" type="reset"onclick="clearTimeout(count)"/>
</div>
<div id="div3">
<label> Player Name: </label><input class="label" type="text"/>
</div>
</fieldset>
</form>

</body>
</html>
[CODE/]

dumpfi · 12-25-2004, 03:00 AM

This should do it:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>countdown script</title>
		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<style type="text/css">
			/*<![CDATA[*/
				body {
     				background:#999;
     				margin-top:4em;
 				}
				.container {
     				width:18em;
     				border:inset 2px #999;
     				margin:auto;
				}
				.container, label {
     				font-family:arial;
     				font-size:16px;
 				}
				form {
     				font-family:courier;
     				font-size:0.8em;
 				}
				.div1, .div2 {
     				width:16em;
     				border:inset 6px #999;
     				background:#777;
     				text-align:center;
 				}
				.div1 {
     				border-bottom:0px;
    				margin:8px 8px 0px 9px;
 				}
				.div2 {
     				border-top:0px;
     				margin:0px 8px 8px 9px;
 				}
				.timer {
     				width:1.8em;
     				margin:3px;
     				background:#000;
     				color:#fff;
     				text-align:center;
 				}
				.butts {
     				width:3.6em;
     				margin:3px;
     				background:#999;
     				color:#333;
 				}
 				.time_left {
 				    white-space:pre;
 				}
			/*//]]>*/
		</style>
		<script type="text/javascript">
			//<![CDATA[
				function timers() {
				    this.instance_name = 'countdown';
				    this.last_update = Math.floor(new Date().getTime() / 1000);
				    this.secs = 180;
				    this.timers = new Array();
				    this.parent = document.getElementById('active');
				    this.create = function() {
				        var name = document.timer.name.value;
				        if(!name) window.alert('Specify a name for the countdown first.');
				        else {
				            for(var i = 0; i < this.timers.length; i++) {
				                if(this.timers[i].name == name) {
									window.alert('Name already in use.');
									return;
				                }
				            }
				            var no_counters = document.getElementById('no_counters');
				            if(no_counters) no_counters.parentNode.removeChild(no_counters);
				        	var tr = document.createElement('tr');
				        	var td_name = document.createElement('td');
				        	td_name.appendChild(document.createTextNode(name));
				        	var td_time_left = document.createElement('td');
				        	td_time_left.className = 'time_left';
				        	var label_mins = document.createElement('label');
				        	var label_secs = document.createElement('label');
							var input_mins = document.createElement('input');
							input_mins.type = 'text';
							input_mins.className = 'timer';
							input_mins.readonly = 1;
							var input_secs = input_mins.cloneNode(true);
							input_mins.value = '03';
							input_secs.value = '00';
							label_mins.appendChild(input_mins);
							label_mins.appendChild(document.createTextNode(' mins. '));
							label_secs.appendChild(input_secs);
							label_secs.appendChild(document.createTextNode(' secs. '));
							td_time_left.appendChild(label_mins);
							td_time_left.appendChild(label_secs);
				        	var td_reset = document.createElement('td');
				        	var input_reset = document.createElement('input');
				        	input_reset.type = 'button';
				        	input_reset.className = 'butts';
							input_reset.value = 'reset';
				        	input_reset.setAttribute('onclick', this.instance_name + '.reset(' + this.timers.length + ');');
				        	td_reset.appendChild(input_reset);
				        	var td_clear = document.createElement('td');
				        	var input_clear = document.createElement('input');
				        	input_clear.type = 'button';
				        	input_clear.className = 'butts';
				        	input_clear.value = 'clear';
				        	input_clear.setAttribute('onclick', this.instance_name + '.clear(' + this.timers.length + ');');
				        	td_clear.appendChild(input_clear);
				        	tr.appendChild(td_name);
				        	tr.appendChild(td_time_left);
				        	tr.appendChild(td_reset);
				        	tr.appendChild(td_clear);
				        	this.parent.appendChild(tr);
				        	var timer = { };
				            timer.name = name;
				            timer.left = this.secs;
				            timer.elem = tr;
				            this.timers.push(timer);
				            if(typeof(document.all) != 'undefined' && typeof(window.opera) == 'undefined') this.damn_ie();
				        }
				    }
				    this.reset = function(number) {
				        this.timers[number].left = this.secs;
				    }
				    this.clear = function(number) {
				        this.timers[number].elem.parentNode.removeChild(this.timers[number].elem);
				        this.timers.splice(number, 1);
				    }
				    this.update = function() {
				        var now = Math.floor(new Date().getTime() / 1000);
				        var elapsed_secs = now - this.last_update;
				        this.last_update = now;
				        for(var i = 0; i < this.timers.length; i++) {
				            this.timers[i].left -= elapsed_secs;
				            if(this.timers[i].left < 1) {
				                this.notify(i);
				                this.clear(i);
								i--;
				            }
				            else this.show(i);
				        }
				        if(!i) this.no_counters();
						window.setTimeout(this.instance_name + '.update()', 1000);
				    }
				    this.show = function(number) {
				        var secs = this.timers[number].left;
				        var mins_left = Math.floor(secs / 60);
				        var secs_left = secs - mins_left * 60;
				        var td_timers = this.timers[number].elem.childNodes[1];
				        td_timers.firstChild.firstChild.value = (mins_left < 10) ? '0' + mins_left : mins_left;
				        td_timers.childNodes[1].firstChild.value = (secs_left < 10) ? '0' + secs_left : secs_left;
				    }
				    this.no_counters = function() {
				        if(document.getElementById('no_counters')) return;
				        var tr = document.createElement('tr');
				        tr.id = 'no_counters';
				        var td = document.createElement('td');
				        td.colSpan = 4;
				        td.appendChild(document.createTextNode('no active countdowns'));
				        tr.appendChild(td);
				        this.parent.appendChild(tr);
				        if(typeof(document.all) != 'undefined' && typeof(window.opera) == 'undefined') this.damn_ie();
				    }
				    this.notify = function(i) {
				        window.alert('Countdown "' + this.timers[i].name + '" completed.');
				    }
				    this.damn_ie = function() {
				        this.parent.parentNode.innerHTML = this.parent.parentNode.innerHTML;
						this.parent = document.getElementById('active');
						var trs = this.parent.getElementsByTagName('tr');
						for(var i = 0; i < this.timers.length; i++) {
							this.timers[i].elem = trs[i + 1];
						}
				    }
				}
				window.onload = function() {
					countdown = new timers();
					countdown.update();
				}
			//]]>
		</script>
	</head>
	<body>
	    <form action="#">
	        <fieldset class="container">
	            <legend>active countdowns</legend>
	                <table class="div1 div2" id="active">
	                    <tr>
	                        <th>name</th>
	                        <th>time left</th>
	                        <th>reset</th>
	                        <th>clear</th>
						</tr>
					</table>
				</legend>
			</fieldset>
		</form>
		<form action="#" name="timer">
			<fieldset class="container">
				<legend>new countdown</legend>
				<div class="div1">
					<label> Name: <input name="name" class="timer" style="width:5em;" type="text" /></label>
				</div>
				<div class="div2">
					<input class="butts" type="button" value="start" onclick="countdown.create();" />
				</div>
			</fieldset>
		</form>
	</body>
</html>

dumpfi

bunion · 12-25-2004, 08:25 PM

Many thanks dudes! you rock!