JavaScript Forum

**peru** · 03-12-2006, 06:33 PM

hi! i have a little problem with a script. i found this script, and i wanted to use it 2 or more times with different times, but it doesnt work.

Code:

 <html>
<head>
 
<!-- COUNTDOWN TIMER -->
 
<!-- This goes in the HEAD of the html file -->
 
<script language="JavaScript" type="text/javascript">
<!-- Copyright 2006, Sandeep Gangadharan -->
<!-- For more free scripts go to http://sivamdesign.com/scripts/ -->
 
<!--
var sec = 00; // set the seconds
var min = 05; // set the minutes
 
function countDown() {
sec--;
if (sec == -01) {
sec = 59;
min = min - 1; }
else {
min = min; }
 
if (sec<=9) { sec = "0" + sec; }
 
time = (min<=9 ? "0" + min : min) + " min and " + sec + " sec ";
 
if (document.getElementById) { theTime.innerHTML = time; }
 
SD=window.setTimeout("countDown();", 1000);
if (min == '00' && sec == '00') { sec = "00"; window.clearTimeout(SD); }
}
window.onload = countDown;
// -->
</script>
 
<style type="text/css">
<!--
.timeClass {
font-family:arial,verdana,helvetica,sans-serif;
font-weight:normal;
font-size:10pt;
}
-->
</style>
 
</head>
<body>
 
<!-- This goes into the BODY of the file -->
 
<table width="100%">
<tr><td width="100%" align="center"><span id="theTime" class="timeClass"></span></td></tr>
</table>
</body>
</html>

how can i do, to use this code, ones from 5 min to 0 min, and the second time from 15 to 0 ?? ty!!

**vangogh** · 03-12-2006, 09:11 PM

I'm not sure I completely understand what you're asking. I'm thinking that in some places you want the timer to countdown by 5 minutes and in other places you want it to countdown by 15 minutes. Is that right?

If that's right then if you look in funtion countDown(); you'll see a line of code:

min = min - 1;

That should be descreasing the time by 1 minute each time through the funtion. I think you just need to change it to:

min =min - 5;

or

min = min - 15;

If that's not what you were looking for let me know a little more about what you're trying to do and I'll take another look.

**peru** · 03-12-2006, 10:12 PM

hi vangogh!

the problem is that. i become 2 different times from a php script ok? ill put this 2 times in variables, and then i want to show the user, how many time he must to wait to do the next action. with 1 time works great, but with the 2nd time not so good.

imagine 1 time is 5 min, and the other time 15, they must to go to 0 ok? when the 1st time (5min) in 0 min is, the one with 15 stops in 10:00 and then it doesnt work anymore.

maybe i should use another js but my knowledge of js is very bad. can u help me pls?

if i was not clear enough, pls tell me! :P

bye!!

**vangogh** · 03-13-2006, 02:18 AM

peru I think I understand. Both times are showing at the same time on the page. The 5 minute one counts down to 0 and works fine, but the one that starts at 15 minutes also stops and stays at 10 minutes even though it should continue to keep coounting down to 0 also.

Is that right? Just want to make sure I completely understand before I try to see how to get things to work.

**chrishirst** · 03-13-2006, 04:32 AM

you will need to rename the variables in one of the functions, by the sounds of it they both have the same name, so when SD = 0 they both stop.
Also the display span should have a different ID

**peru** · 03-13-2006, 08:12 AM

hi everyone!

chrishirst, i made that, i puted 2 different SDs but nothing.
vangogh thats right, i think is not so hard, but i dont have any idea how to do that.

i suppose im making the things wrong :P

so to sum up, i want to show 2 countdowns, and the seconds and minuts are recived from a php variable. ty guys!

**chrishirst** · 03-13-2006, 01:40 PM

you need to change more than just the SD name. Every common variable needs to be changed.
As below.
the PHP variables for inserting the times are $timer1 & $timer2

Code:

 <html>
<head>
 
<!-- COUNTDOWN TIMER -->
 
<!-- This goes in the HEAD of the html file -->
 
<script type="text/javascript">
<!-- Copyright 2006, Sandeep Gangadharan -->
<!-- For more free scripts go to http://sivamdesign.com/scripts/ -->
<!-- Modified for dual operation by Chris Hirst -->
<!-- www.candsdesign.co.uk -->
 
<!--
var sec_1 = 00; // set the seconds
var sec_2 = 00; // set the seconds
var min_1 = <?$timer1?> //  01; // set the minutes
var min_2 = <?$timer2?> //  02;

function cd_1() {
sec_1--;
if (sec_1 == -01) {
sec_1 = 59;
min_1 = min_1 - 1; }
else {
min_1 = min_1; }
 
if (sec_1<=9) { sec_1 = "0" + sec_1; }
 
time1 = (min_1<=9 ? "0" + min_1 : min_1) + " min and " + sec_1 + " sec ";
 
if (document.getElementById) { time_1.innerHTML = time1; }
 
SD_1=window.setTimeout("cd_1();", 1000);
if (min_1 == '00' && sec_1 == '00') { sec_1 = "00"; window.clearTimeout(SD_1); }
}

function cd_2() {
sec_2--;
if (sec_2 == -01) {
sec_2 = 59;
min_2 = min_2 - 1; }
else {
min_2 = min_2; }
 
if (sec_2<=9) { sec_2 = "0" + sec_2; }
 
time2 = (min_2<=9 ? "0" + min_2 : min_2) + " min and " + sec_2 + " sec ";
 
if (document.getElementById) { time_2.innerHTML = time2; }
 
SD_2=window.setTimeout("cd_2();", 1000);
if (min_2 == '00' && sec_2 == '00') { sec_2 = "00"; window.clearTimeout(SD_2); }
}
 
function countDown() {
cd_1();
cd_2();
}

window.onload = countDown;
// -->
</script>
 
<style type="text/css">
<!--
.timeClass {
font-family:arial,verdana,helvetica,sans-serif;
font-weight:normal;
font-size:10pt;
}
-->
</style>
 
</head>
<body>
 
<!-- This goes into the BODY of the file -->
 
<div id="time_1" class="timeClass"></div>
<div id="time_2" class="timeClass"></div>

</body>
</html>

This is just a rough version made while sitting at a friends computer using notepad. Works Ok though but the code could be a lot tidier.

**vangogh** · 03-13-2006, 01:51 PM

peru I was going to recommend that same thing Chris mentioned above. You'll need two sets of variables, one for each timer. And like Chris said you'll need to have 2 variables for every common variable.

Take look at Chris's code. I'm sure it will work and will be what you're looking for.

**peru** · 03-13-2006, 07:35 PM

now everything runs great!!

ty very much chrishirst and vangogh! byee