Solved

Timers stop and clear

Posted on 2010-11-23
5
296 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
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)

752 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