stargateatlantis
asked on
Timers stop and clear
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>
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
If you don't want the delay, both should be updated in the same timer function.
ASKER
What would i change in the timer function for this
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER