I am brand new to javascript. I am trying to create a multiple timer page with a start button. I have seen several examples of different countdowns all with things I like, but when I examine the code it is hard for me to pull out the pieces that I like. I was hoping someone could point me in the right direction... maybe with a small base code that I can expand on. I would be very greatful for any help I could get. Here is the jist of what I'm looking for. When the start button is pressed Timer one should go for 10 minutes. When Timer1 is done a sound file should play and immediately start Timer2. Timer2 should last for 15 minutes. This cycle should repeat for six timers. Timer4 should be 2 hours. I don't want miliseconds. A pause button would be nice but unnecessary. And I would like the time to be shown bulleted with the whole number until the countdown begins. For example: (Start) Timer1 10:00 Timer2 15:00 Timer3 20:00 Timer4 2:00:00 Timer5 20:00 Timer6 20:00 [Start] [Pause] Example: Counting down Timer1 00:00 Timer2 00:00 Timer3 00:00 Timer4 0:37:00 Timer5 20:00 Timer6 20:00 [Start] [Pause] Any help would be greatly appreciated.
do you understand the individual elements but just don't understand Timers ? if so, then what you do is just have one timer call what ever function you need, along with starting the next Timer. here's a simple page i wrote to illustrate this 'daisy chain' of Timers, to change a header 3 different colors. <html> <head> <script type="text/javascript"> function timer1() { var t=setTimeout("turnBlue()",1000); } function turnBlue(){ document.getElementById('h1').style.color = "blue"; var t=setTimeout("timer2turnRed()",1000); } function timer2turnRed(){ document.getElementById('h1').style.color = "red"; var t=setTimeout("timer3turnGreen()",1000); } function timer3turnGreen(){ document.getElementById('h1').style.color = "green"; var t=setTimeout("turnBlue()",1000); } </script> </head> <body> <h1 id="h1"> This will turn BLUE then RED then BLUE, then GREEN, then repeat ! </h1> <input type="button" onclick="timer1()" /> </body> </html> Code (markup): i'm sure if you look at it, try it, you can see how to adapt it to your needs. if not, just ask
I do understand the individual elements, but have a hard time putting them all together. Like a foreign language, I can read it but can't speak it. It would take me weeks to timker with all the examples I have compiled (to include yours) and create what I need. I understand the code you posted waits a certain amount of time before it changes the color, but it doesn't allow the user to watch the time countdown, which is what I need.
i made a simple example and posted it here: demetri-media.com/JavaScript/timer.html you can view the source code to get the HTML. below is the complete javascript that makes it work ( some of it courtesy of w3schools (www.w3schools.com) ) i am sure it could be written better and more concisely. the main function could have been written more modular, with parameters passed to it, but i hope written out 'long-hand' like this it is easy to follow , and see what is going on. if not, just ask. var c=5; var d=5; var e=5; var t1; var t2; var t3; var B=0; var R=0; var G=0; function timedCountdown1() { t1=setTimeout("timedCountdown1()",1000); document.getElementById('timeB').innerHTML=c; c=c-1; if(c==-1){c=0; clearTimeout(t1); } } function timedCountdown2() { if(R==0){var tR=setTimeout("turnRed()",5000);} R=1; t2=setTimeout("timedCountdown2()",1000); document.getElementById('timeR').innerHTML=d; d=d-1; if(d==-1){d=0; clearTimeout(t2);} } function timedCountdown3() { t3=setTimeout("timedCountdown3()",1000); document.getElementById('timeG').innerHTML=e; e=e-1; if(e==-1){e=0;document.getElementById('h1').style.color = "green"; } if(e==-1){clearTimeout(t3);} } function timer1() { var tB=setTimeout("turnBlue()",5000); timedCountdown1(); document.getElementById('btn').style.visibility= "hidden"; } function turnBlue(){ document.getElementById('h1').style.color = "blue"; timedCountdown2(); } function turnRed(){ document.getElementById('h1').style.color = "red"; timedCountdown3(); } Code (markup): basically 2 timers are acting at the same time - the first one to count to 5 seconds, and then change the color. the other one to count to 1 second, and to change the number in the text field, and then loop again and thus create the count down. i am no javascript maven ( i work in AS3) , so there has to be different/better ways to approach this,but this is the way i would figure out. hope it helps.
i hope you are kidding, right? this was just an example. instead of changing colors , it could do anything you want, or nothing at all. it could just count down ( or count up...) if that's what you want. it's all up to you. that's why we code ourselves, right ? to make things do whatever WE want them to do ! the way to learn is to look at examples - especially simple examples like this, and see how you can then make adjustments and change things to make it work the way you want. most people will show examples and always use either an alert("something was done") or else a document.write("something else was done"). me, i prefer to see real world examples. i wrote you and laid out some good code for you to start with and help you think about the logic of your project. if you are as brand new to javascript as you say, how are you learning it ? books ? tutorials? in a class? i can strongly suggest starting with w3schools tutorials. they will give you a great basis in anything they teach. and its free ! w w w.w3schools.com once again, feel free to ask specific questions to get the best answers