Solved

Timers stop and clear

Posted on 2010-11-23
5
294 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
The viewer will learn how to dynamically set the form action using jQuery.
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…

837 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