Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Timers stop and clear

Posted on 2010-11-23
5
Medium Priority
?
298 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:Justin Mathews
Justin Mathews earned 2000 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:Justin Mathews
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:
Justin Mathews earned 2000 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
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…
Suggested Courses

715 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