ive got a coutdown timer, like an alarm clock. but i need a few of them in 1 page, when i try to add another one with the code, it messes up, thanks for any help heres the code:
<script language="JavaScript">
<!-- Begin
var up,down;
var min1,sec1;
var cmin1,csec1,cmin2,csec2;
function Minutes(data) {
for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":") break;
return(data.substring(0,i)); }
function Seconds(data) {
for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":") break;
return(data.substring(i+1,data.length)); }
function Display(min,sec) {
var disp;
if(min<=9) disp=" 0";
else disp=" ";
disp+=min+":";
if(sec<=9) disp+="0"+sec;
else disp+=sec;
return(disp); }
function Down() {
cmin2=1*Minutes(document.sw.beg2.value);
csec2=0+Seconds(document.sw.beg2.value);
DownRepeat(); }
function DownRepeat() {
csec2--;
if(csec2==-1) { csec2=59; cmin2--; }
document.sw.disp2.value=Display(cmin2,csec2);
if((cmin2==0)&&(csec2==0)) alert("CLOCK 1 READY");
else down=setTimeout("DownRepeat()",1000); }
// End -->
</script></head>
<body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<center><table align="center" cellspacing="2" cellpadding="2">
<tr>
<center>
<form name="sw">
<td>
<table border="3" width="100%">
<tr><th colspan="2" bgcolor="#deb887">CLOCK 1</th></tr>
<tr align="center"><td>Start at<br><input type="text" name="beg2" size="7" value="0:10"></td>
<td><input type="button" value="Start" onclick="Down()"></td></tr>
<tr align="center"><td colspan="2" bgcolor="#deb887"><input type="text" name="disp2" size="9"></td></tr>
Full Version: help with countdown timer
See Adding more than one JavaScript to a page at javascriptkit.com.
QUOTE(Frederiek @ Mar 9 2008, 03:10 PM) 
sorry, that link doesn't help me it talks about if you have 2 event-handlers, and the correct way to like them together. but my script doesn't contain any event-hanldlers, because it is a constaint runing script and and doesn't need an event to start. but i will try messing around with it, if i get it working ill let you know.
thanks
well no luck , i don't think the problem is just java. i think its part java and part table
You'll need to use different function and variable names for the different countdown timers, so they don't stomp on each other's data.
QUOTE(Darin McGrew @ Mar 9 2008, 07:51 PM)
You'll need to use different function and variable names for the different countdown timers, so they don't stomp on each other's data.
ive try that i can get two clocks to pop up ,aslo adding the new fuctions, but it ends up with both start bottons working 1 timer even though the names are diffrent( ill put up the code for two in a second)
for 2 clocks that don't work. i even gave the two function Down and the two fuction DownRepeat diffrent names but it doesn't help this page it has the problem listed above
<script language="JavaScript">
<!-- Begin
var up,down;
var min1,sec1;
var cmin1,csec1,cmin2,csec2;
function Minutes(data) {
for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":") break;
return(data.substring(0,i)); }
function Seconds(data) {
for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":") break;
return(data.substring(i+1,data.length)); }
function Display(min,sec) {
var disp;
if(min<=9) disp=" 0";
else disp=" ";
disp+=min+":";
if(sec<=9) disp+="0"+sec;
else disp+=sec;
return(disp); }
function Down() {
cmin2=1*Minutes(document.sw.beg2.value);
csec2=0+Seconds(document.sw.beg2.value);
DownRepeat(); }
function DownRepeat() {
csec2--;
if(csec2==-1) { csec2=59; cmin2--; }
document.sw.disp2.value=Display(cmin2,csec2);
if((cmin2==0)&&(csec2==0)) alert("clock 1 READY");
else down=setTimeout("DownRepeat()",1000); }
function Down2() {
cmin2=1*Minutes(document.sw.beg3.value);
csec2=0+Seconds(document.sw.beg3.value);
DownRepeat2(); }
function DownRepeat2() {
csec2--;
if(csec2==-1) { csec2=59; cmin2--; }
document.sw.disp3.value=Display(cmin2,csec2);
if((cmin2==0)&&(csec2==0)) alert("clock 2 READY");
else down=setTimeout("DownRepeat2()",1000); }
// End -->
</script></head>
<body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<center><table align="center" cellspacing="2" cellpadding="2">
<tr>
<center>
<form name="sw">
<td>
<table border="3" width="100%">
<tr><th colspan="2" bgcolor="#deb887">clock 1</th></tr>
<tr align="center"><td>Start at<br><input type="text" name="beg2" size="7" value="0:10"></td>
<td><input type="button" value="Start" onclick="Down()"></td></tr>
<tr align="center"><td colspan="2" bgcolor="#deb887"><input type="text" name="disp2" size="9"></td></tr>
<table border="3" width="100%">
<tr><th colspan="2" bgcolor="#deb887">clock 2</th></tr>
<tr align="center"><td>Start at<br><input type="text" name="beg3" size="7" value="0:10"></td>
<td><input type="button" value="Start" onclick="Down2()"></td></tr>
<tr align="center"><td colspan="2" bgcolor="#deb887"><input type="text" name="disp3" size="9"></td></tr>
<script language="JavaScript">
<!-- Begin
var up,down;
var min1,sec1;
var cmin1,csec1,cmin2,csec2;
function Minutes(data) {
for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":") break;
return(data.substring(0,i)); }
function Seconds(data) {
for(var i=0;i<data.length;i++) if(data.substring(i,i+1)==":") break;
return(data.substring(i+1,data.length)); }
function Display(min,sec) {
var disp;
if(min<=9) disp=" 0";
else disp=" ";
disp+=min+":";
if(sec<=9) disp+="0"+sec;
else disp+=sec;
return(disp); }
function Down() {
cmin2=1*Minutes(document.sw.beg2.value);
csec2=0+Seconds(document.sw.beg2.value);
DownRepeat(); }
function DownRepeat() {
csec2--;
if(csec2==-1) { csec2=59; cmin2--; }
document.sw.disp2.value=Display(cmin2,csec2);
if((cmin2==0)&&(csec2==0)) alert("clock 1 READY");
else down=setTimeout("DownRepeat()",1000); }
function Down2() {
cmin2=1*Minutes(document.sw.beg3.value);
csec2=0+Seconds(document.sw.beg3.value);
DownRepeat2(); }
function DownRepeat2() {
csec2--;
if(csec2==-1) { csec2=59; cmin2--; }
document.sw.disp3.value=Display(cmin2,csec2);
if((cmin2==0)&&(csec2==0)) alert("clock 2 READY");
else down=setTimeout("DownRepeat2()",1000); }
// End -->
</script></head>
<body bgcolor="#ffe4c4" text="#000000" link="#0000FF" vlink="#800080" alink="#FF0000">
<center><table align="center" cellspacing="2" cellpadding="2">
<tr>
<center>
<form name="sw">
<td>
<table border="3" width="100%">
<tr><th colspan="2" bgcolor="#deb887">clock 1</th></tr>
<tr align="center"><td>Start at<br><input type="text" name="beg2" size="7" value="0:10"></td>
<td><input type="button" value="Start" onclick="Down()"></td></tr>
<tr align="center"><td colspan="2" bgcolor="#deb887"><input type="text" name="disp2" size="9"></td></tr>
<table border="3" width="100%">
<tr><th colspan="2" bgcolor="#deb887">clock 2</th></tr>
<tr align="center"><td>Start at<br><input type="text" name="beg3" size="7" value="0:10"></td>
<td><input type="button" value="Start" onclick="Down2()"></td></tr>
<tr align="center"><td colspan="2" bgcolor="#deb887"><input type="text" name="disp3" size="9"></td></tr>
The onclick event handlers need to call the different functions. Right now, they're calling the same function.
QUOTE(Darin McGrew @ Mar 9 2008, 08:07 PM)
The onclick event handlers need to call the different functions. Right now, they're calling the same function.
check out the edit above, i have changed the onclick events and event functions
well that help out a bit. i did that before, but most have missed something before. the new problem is that when 1 clock stops they both do and also i think this is wierd but when i hit clock 1 and it stops and then hit clock 2 it tells me it 1, only on the frist time though, and vise versa
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.