Solved

Timers stop and clear

Posted on 2010-11-23
5
288 Views
Last Modified: 2012-05-10
I have the following code but for some reason the stop and clear aren't working for each timer any reasons as to why
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript">
$(document).ready(function () {

//Function to add timers to each start button//
   $('.myStartTimers').each(function(index){ 
       var tID=index;
	   var timerName="timer"+tID;
	   
	   alert(timerName);
	   
	   var timerExpireValue="#btn"+tID+"Start";
	   var actualExpireTimes=$(timerExpireValue).val();

          $(this).click(function () {		  
                var timerId = $(this).attr('id'),
                    action = "$.do_time('"+timerName+"',["+actualExpireTimes+"])"
                window[timerId] = setInterval(action, 1000);
                $(this).attr("disabled", true);
				return false;
        });
    });//End Function to append timers//
	
     totaltimer = setInterval("$.displayTotal('totaltimer')", 1000);
	 
		
	//Function to add timers to each Stop button//
   $('.myStopTimers').each(function(index){ 
          var timerName="timer"+tID;
		  $(this).click(function () {
			if(timerName) clearInterval(timerName);
		return false;      
	 });
	 
	 
	 //Function to add timers to each Stop button//
   $('.myClearTimers').each(function(index){ 
          var timerName="timer"+tID;
		  $(this).click(function () {
			$(this).val()="00:00:00";
		return false;      
	 });
	 
		  
		  
    });//End Function to Stop Timers//


});//End Document ready

//Timer JQuery function
(function ($) {
   totaltime = "00:00:00";
   		// MODIFICATION: changed expireTime to times.
        $.do_time = function(timerID, times) {
                
                var time = ($("#" + timerID).html()).split(':');
                var hour = parseInt(time[0], 10);
                var minute = parseInt(time[1], 10);
                var second = parseInt(time[2], 10) + 1;
                
                var ttime = totaltime.split(':');
                var thour = parseInt(ttime[0], 10);
                var tminute = parseInt(ttime[1], 10);
                var tsecond = parseInt(ttime[2], 10) + 1;
                
                if (second > 59) {
                        second = 0;
                        minute++;
                }
                if (minute > 59) {
                        minute = 0;
                        hour++;
                }
                if (tsecond > 59) {
                        tsecond = 0;
                        tminute++;
                }
                if (tminute > 59) {
                        tminute = 0;
                        thour++;
                }
                
				// MODICIFICATION: loop over all times in stead of one time
				if(times){
					for(i in times){
						var etime = times[i].split(':');
						var ehour = parseInt(etime[0], 10);
						var eminute = parseInt(etime[1], 10);
						var esecond = parseInt(etime[2], 10);
						expired = false;
						if(ehour<hour) {
								expired = true;
						}
						else if(ehour==hour) {
								if(eminute<minute) {
										expired = true;
								}
								else if(eminute==minute) {
										if(esecond<=second) {
												expired = true;
										}
								}
						}
						
						if(expired) {
							//MODIFICATION: use a switch to control different color states.
							var steps = 5;
							progress = Math.floor((parseInt(i,10)+1)/times.length*steps)-1;
							switch(progress){
								case 0: $("#" + timerID).css("background-color", "yellow"); break;
								case 1: $("#" + timerID).css("background-color", "#FFC000"); break;
								case 2: $("#" + timerID).css("background-color", "#FF8000"); break;
								case 3: $("#" + timerID).css("background-color", "#FF4000"); break;
								case 4: $("#" + timerID).css("background-color", "red"); break;
							}
							
						}
						
					}
				}
                
                time = (hour>9?hour:'0'+hour) +':'+ (minute>9?minute:'0'+minute) +':'+ (second>9?second:'0'+second);
                $("#" + timerID).html(time);
                totaltime = "" + (thour>9?thour:'0'+thour) +':'+ (tminute>9?tminute:'0'+tminute) +':'+ (tsecond>9?tsecond:'0'+tsecond);
        } //End Doo time function
        $.displayTotal = function(labelID) {
                $("#" + labelID).html(totaltime);
        }
})(jQuery);
</script>
</head>
<body>
    

<p><label id="timer0">00:00:00</label></p>
<p><label id="timer1">00:00:00</label></p>
<p><label id="timer2">00:00:00</label></p>

<p><label id="totaltimer">00:00:00</label></p>



<p><button type="button" id="btn0Start" value="'00:00:03','00:00:06','00:00:09','00:00:15'" class="myStartTimers">Start</button>
<button type="button" id="btn0Stop" class="myStopTimers">Stop</button></p>
<button type="button" id="btn0Clear" class="myClearTimers">Clear</button></p>


<p><button type="button" id="btn1Start" value="'00:00:03','00:00:06','00:00:09','00:00:15'" class="myStartTimers">Start</button>
<button type="button" id="btn1Stop" class="myStopTimers">Stop</button></p>
<button type="button" id="btn1Clear" class="myClearTimers">Clear</button></p>

<p><button type="button" id="btn2Start" value="'00:00:03','00:00:06','00:00:09','00:00:15'" class="myStartTimers">Start</button>
<button type="button" id="btn2Stop" class="myStopTimers">Stop</button></p>
<button type="button" id="btn2Clear" class="myClearTimers">Clear</button></p>
 
</body>
</html>

Open in new window

0
Comment
Question by:stargateatlantis
  • 3
  • 2
5 Comments
 
LVL 16

Assisted Solution

by:jmatix
jmatix earned 500 total points
ID: 34200230
Made some modifications. Try code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script language="javascript">

$(document).ready(function () {



//Function to add timers to each start button//

   $('.myStartTimers').each(function(index){ 

       var tID=index;

	   var timerName="timer"+tID;

	   

//	   alert(timerName);

	   

	   var timerExpireValue="#btn"+tID+"Start";

	   var actualExpireTimes=$(timerExpireValue).attr('rel');

//	   alert(actualExpireTimes);



          $(this).click(function () {		  

                var timerId = $(this).attr('id'),

                    action = "$.do_time('"+timerName+"',["+actualExpireTimes+"])"

                window[timerId] = setInterval(action, 1000);

                $(this).attr("disabled", true);

				return false;

        });

    });//End Function to append timers//

	

     var totaltimer = setInterval("$.displayTotal('totaltimer')", 1000);

	 

		

	//Function to add timers to each Stop button//

   $('.myStopTimers').each(function(index){ 

		  var timerId="btn"+index+"Start";

		  $(this).click(function () {

			if(window[timerId]) clearInterval(window[timerId]);

			return false;      

			});

	 });

	 

	 

	 //Function to add timers to each Stop button//

   $('.myClearTimers').each(function(index){ 

          var timerName="#timer"+index;

		  $(this).click(function () {

			$(timerName).text("00:00:00");

		return false;      

	 });

	 

    });//End Function to Stop Timers//





});//End Document ready



//Timer JQuery function

(function ($) {

   totaltime = "00:00:00";

   		// MODIFICATION: changed expireTime to times.

        $.do_time = function(timerID, times) {

                

                var time = ($("#" + timerID).html()).split(':');

                var hour = parseInt(time[0], 10);

                var minute = parseInt(time[1], 10);

                var second = parseInt(time[2], 10) + 1;

                

                var ttime = totaltime.split(':');

                var thour = parseInt(ttime[0], 10);

                var tminute = parseInt(ttime[1], 10);

                var tsecond = parseInt(ttime[2], 10) + 1;

                

                if (second > 59) {

                        second = 0;

                        minute++;

                }

                if (minute > 59) {

                        minute = 0;

                        hour++;

                }

                if (tsecond > 59) {

                        tsecond = 0;

                        tminute++;

                }

                if (tminute > 59) {

                        tminute = 0;

                        thour++;

                }

                

				// MODICIFICATION: loop over all times in stead of one time

				if(times){

					for(i in times){

						var etime = times[i].split(':');

						var ehour = parseInt(etime[0], 10);

						var eminute = parseInt(etime[1], 10);

						var esecond = parseInt(etime[2], 10);

						expired = false;

						if(ehour<hour) {

								expired = true;

						}

						else if(ehour==hour) {

								if(eminute<minute) {

										expired = true;

								}

								else if(eminute==minute) {

										if(esecond<=second) {

												expired = true;

										}

								}

						}

						

						if(expired) {

							//MODIFICATION: use a switch to control different color states.

							var steps = 5;

							progress = Math.floor((parseInt(i,10)+1)/times.length*steps)-1;

							switch(progress){

								case 0: $("#" + timerID).css("background-color", "yellow"); break;

								case 1: $("#" + timerID).css("background-color", "#FFC000"); break;

								case 2: $("#" + timerID).css("background-color", "#FF8000"); break;

								case 3: $("#" + timerID).css("background-color", "#FF4000"); break;

								case 4: $("#" + timerID).css("background-color", "red"); break;

							}

							

						}

						

					}

				}

                

                time = (hour>9?hour:'0'+hour) +':'+ (minute>9?minute:'0'+minute) +':'+ (second>9?second:'0'+second);

                $("#" + timerID).html(time);

                totaltime = "" + (thour>9?thour:'0'+thour) +':'+ (tminute>9?tminute:'0'+tminute) +':'+ (tsecond>9?tsecond:'0'+tsecond);

        } //End Doo time function

        $.displayTotal = function(labelID) {

                $("#" + labelID).html(totaltime);

        }

})(jQuery);

</script>

</head>

<body>

    



<p><label id="timer0">00:00:00</label></p>

<p><label id="timer1">00:00:00</label></p>

<p><label id="timer2">00:00:00</label></p>



<p><label id="totaltimer">00:00:00</label></p>







<p><button type="button" id="btn0Start" rel="'00:00:03','00:00:06','00:00:09','00:00:15'" class="myStartTimers">Start</button>

<button type="button" id="btn0Stop" class="myStopTimers">Stop</button></p>

<button type="button" id="btn0Clear" class="myClearTimers">Clear</button></p>





<p><button type="button" id="btn1Start" rel="'00:00:03','00:00:06','00:00:09','00:00:15'" class="myStartTimers">Start</button>

<button type="button" id="btn1Stop" class="myStopTimers">Stop</button></p>

<button type="button" id="btn1Clear" class="myClearTimers">Clear</button></p>



<p><button type="button" id="btn2Start" rel="'00:00:03','00:00:06','00:00:09','00:00:15'" class="myStartTimers">Start</button>

<button type="button" id="btn2Stop" class="myStopTimers">Stop</button></p>

<button type="button" id="btn2Clear" class="myClearTimers">Clear</button></p>

 

</body>

</html>

Open in new window

0
 

Author Comment

by:stargateatlantis
ID: 34200352
How come the total time is one millisecond delay
0
 
LVL 16

Expert Comment

by:jmatix
ID: 34200415
If you don't want the delay, both should be updated in the same timer function.
0
 

Author Comment

by:stargateatlantis
ID: 34200431
What would i change in the timer function for this
0
 
LVL 16

Accepted Solution

by:
jmatix earned 500 total points
ID: 34200493
Because of the total timer was getting started in document.ready(). So it got a headstart. See below. I moved the total timer into 'Start' button click().

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script language="javascript">

$(document).ready(function () {



//Function to add timers to each start button//

   $('.myStartTimers').each(function(index){ 

       var tID=index;

	   var timerName="timer"+tID;

	   

//	   alert(timerName);

	   

	   var timerExpireValue="#btn"+tID+"Start";

	   var actualExpireTimes=$(timerExpireValue).attr('rel');

//	   alert(actualExpireTimes);



          $(this).click(function () {		  

                var timerId = $(this).attr('id'),

                    action = "$.do_time('"+timerName+"',["+actualExpireTimes+"])"

                window[timerId] = setInterval(action, 1000);

				var totaltimer = setInterval("$.displayTotal('totaltimer')", 1000);

                $(this).attr("disabled", true);

				return false;

        });

    });//End Function to append timers//

	

	 

		

	//Function to add timers to each Stop button//

   $('.myStopTimers').each(function(index){ 

		  var timerId="btn"+index+"Start";

		  $(this).click(function () {

			if(window[timerId]) clearInterval(window[timerId]);

			return false;      

			});

	 });

	 

	 

	 //Function to add timers to each Stop button//

   $('.myClearTimers').each(function(index){ 

          var timerName="#timer"+index;

		  $(this).click(function () {

			$(timerName).text("00:00:00");

		return false;      

	 });

	 

    });//End Function to Stop Timers//





});//End Document ready



//Timer JQuery function

(function ($) {

   totaltime = "00:00:00";

   		// MODIFICATION: changed expireTime to times.

        $.do_time = function(timerID, times) {

                

                var time = ($("#" + timerID).html()).split(':');

                var hour = parseInt(time[0], 10);

                var minute = parseInt(time[1], 10);

                var second = parseInt(time[2], 10) + 1;

                

                var ttime = totaltime.split(':');

                var thour = parseInt(ttime[0], 10);

                var tminute = parseInt(ttime[1], 10);

                var tsecond = parseInt(ttime[2], 10) + 1;

                

                if (second > 59) {

                        second = 0;

                        minute++;

                }

                if (minute > 59) {

                        minute = 0;

                        hour++;

                }

                if (tsecond > 59) {

                        tsecond = 0;

                        tminute++;

                }

                if (tminute > 59) {

                        tminute = 0;

                        thour++;

                }

                

				// MODICIFICATION: loop over all times in stead of one time

				if(times){

					for(i in times){

						var etime = times[i].split(':');

						var ehour = parseInt(etime[0], 10);

						var eminute = parseInt(etime[1], 10);

						var esecond = parseInt(etime[2], 10);

						expired = false;

						if(ehour < hour) {

								expired = true;

						}

						else if(ehour==hour) {

								if(eminute < minute) {

										expired = true;

								}

								else if(eminute==minute) {

										if(esecond<=second) {

												expired = true;

										}

								}

						}

						

						if(expired) {

							//MODIFICATION: use a switch to control different color states.

							var steps = 5;

							progress = Math.floor((parseInt(i,10)+1)/times.length*steps)-1;

							switch(progress){

								case 0: $("#" + timerID).css("background-color", "yellow"); break;

								case 1: $("#" + timerID).css("background-color", "#FFC000"); break;

								case 2: $("#" + timerID).css("background-color", "#FF8000"); break;

								case 3: $("#" + timerID).css("background-color", "#FF4000"); break;

								case 4: $("#" + timerID).css("background-color", "red"); break;

							}

							

						}

						

					}

				}

                

                time = (hour>9?hour:'0'+hour) +':'+ (minute>9?minute:'0'+minute) +':'+ (second>9?second:'0'+second);

                $("#" + timerID).html(time);

                totaltime = "" + (thour>9?thour:'0'+thour) +':'+ (tminute>9?tminute:'0'+tminute) +':'+ (tsecond>9?tsecond:'0'+tsecond);

        } //End Doo time function

        $.displayTotal = function(labelID) {

                $("#" + labelID).html(totaltime);

        }

})(jQuery);

</script>

</head>

<body>

    



<p><label id="timer0">00:00:00</label></p>

<p><label id="timer1">00:00:00</label></p>

<p><label id="timer2">00:00:00</label></p>



<p><label id="totaltimer">00:00:00</label></p>







<p><button type="button" id="btn0Start" rel="'00:00:03','00:00:06','00:00:09','00:00:15'" class="myStartTimers">Start</button>

<button type="button" id="btn0Stop" class="myStopTimers">Stop</button></p>

<button type="button" id="btn0Clear" class="myClearTimers">Clear</button></p>





<p><button type="button" id="btn1Start" rel="'00:00:03','00:00:06','00:00:09','00:00:15'" class="myStartTimers">Start</button>

<button type="button" id="btn1Stop" class="myStopTimers">Stop</button></p>

<button type="button" id="btn1Clear" class="myClearTimers">Clear</button></p>



<p><button type="button" id="btn2Start" rel="'00:00:03','00:00:06','00:00:09','00:00:15'" class="myStartTimers">Start</button>

<button type="button" id="btn2Stop" class="myStopTimers">Stop</button></p>

<button type="button" id="btn2Clear" class="myClearTimers">Clear</button></p>

 

</body>

</html>

Open in new window

0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now