4 Replies - 2503 Views - Last Post: 16 November 2010 - 09:24 PM

#1 CodeVillain  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 143
  • Joined: 10-July 10

Making this JavaScript timer reset when it's finished

Posted 16 November 2010 - 05:57 PM

Alright, I'm not very good with Javascript, in fact I just started sitting down and really trying to learn it about two weeks ago. I have a timer I got offline and have tweaked with a bit and modified to suit my needs (almost). For the last hour I've been trying to figure out how I can make this script reset itself without having to refresh the page. When the time runs out, I want it to go back to the 00:30 so that I can use it again.

If anyone can help me figure out how to do this I'd appreciate it, also any additional advice you have on what I'm doing (whether you think I should do it a different way or not) is also welcomed.

<form name="cd">
<input id="txt" readonly="true" type="text" value="00:30" border="0" name="disp" />
</form>

<script>

var mins
var secs;

function cd() {
 	mins = 1 * m("0"); // change minutes here
 	secs = 0 + s(":31"); // change seconds here (always add an additional second to your total)
 	redo();
}

function m(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(0, i));
}

function s(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
 	var disp;
 	if(mins <= 9) {
  		disp = "0";
 	} else {
  		disp = ":";
 	}
 	disp += mins + ":";
 	if(secs <= 9) {
  		disp += "0" + secs;
 	} else {
  		disp += secs;
 	}
 	return(disp);
}

function redo() {
 	secs--;
 	if(secs == -1) {
  		secs = 59;
  		mins--;
 	}
 	document.cd.disp.value = dis(mins,secs); // setup additional displays here.
 	if((mins == 0) && (secs == 0)) {
 	} else {
 		cd = setTimeout("redo()",1000);
 	}
}

function init() {
  cd();
}
</script>


Is This A Good Question/Topic? 0
  • +

Replies To: Making this JavaScript timer reset when it's finished

#2 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: Making this JavaScript timer reset when it's finished

Posted 16 November 2010 - 07:29 PM

It seems like the cd function is the starting point for your timer. It sets the mins and secs variables, overwriting them. Then it starts the timer counting down via the redo function. If you called this function, it would restart the timer (except that if the timer isn't finished, a setTimeout event will fire at an untimely time).

Consider adding a button in your HTML code which resets the clock:
<form name="cd">
<input id="txt" readonly="true" type="text" value="00:30" border="0" name="disp" />
<br />
<input type="button" value="Reset" onclick="cd()" />
</form>


And as for the exception I mentioned earlier, you would have to clear any existing timeouts before you created a new one. First you should make the cd variable global.
var mins;
var secs;
var cd;


And then you should cancel it in the cd function:
function cd() {
 	if (cd) // clear any existing timeout
 	  clearTimeout(cd);
 	mins = 1 * m("0"); // change minutes here
 	secs = 0 + s(":31"); // change seconds here (always add an additional second to your total)
 	redo();
}


And you should be good. Let me know how it works.
Was This Post Helpful? 1
  • +
  • -

#3 CodeVillain  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 143
  • Joined: 10-July 10

Re: Making this JavaScript timer reset when it's finished

Posted 16 November 2010 - 08:18 PM

View Postforest51690, on 16 November 2010 - 05:29 PM, said:

It seems like the cd function is the starting point for your timer. It sets the mins and secs variables, overwriting them. Then it starts the timer counting down via the redo function. If you called this function, it would restart the timer (except that if the timer isn't finished, a setTimeout event will fire at an untimely time).

Consider adding a button in your HTML code which resets the clock:
<form name="cd">
<input id="txt" readonly="true" type="text" value="00:30" border="0" name="disp" />
<br />
<input type="button" value="Reset" onclick="cd()" />
</form>


And as for the exception I mentioned earlier, you would have to clear any existing timeouts before you created a new one. First you should make the cd variable global.
var mins;
var secs;
var cd;


And then you should cancel it in the cd function:
function cd() {
 	if (cd) // clear any existing timeout
 	  clearTimeout(cd);
 	mins = 1 * m("0"); // change minutes here
 	secs = 0 + s(":31"); // change seconds here (always add an additional second to your total)
 	redo();
}


And you should be good. Let me know how it works.



I just cannot seem to get this working... I'm pretty sure I've done exactly what you suggested.

<form name="cd">
<input id="txt" readonly="true" type="text" value="00:30" border="0" name="disp" />
<input type="button" value="button" onclick="cd()">
</form>

<script>
var mins;
var secs;
var cd;

function cd() {
    if (cd)
      clearTimeout(cd);
 	mins = 1 * m("0"); // change minutes here
 	secs = 0 + s(":31"); // change seconds here (always add an additional second to your total)
 	redo();
}
function m(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(0, i));
}

function s(obj) {
 	for(var i = 0; i < obj.length; i++) {
  		if(obj.substring(i, i + 1) == ":")
  		break;
 	}
 	return(obj.substring(i + 1, obj.length));
}

function dis(mins,secs) {
 	var disp;
 	if(mins <= 9) {
  		disp = "0";
 	} else {
  		disp = ":";
 	}
 	disp += mins + ":";
 	if(secs <= 9) {
  		disp += "0" + secs;
 	} else {
  		disp += secs;
 	}
 	return(disp);
}

function redo() {
 	secs--;
 	if(secs == -1) {
  		secs = 59;
  		mins--;
 	}
 	document.cd.disp.value = dis(mins,secs); // setup additional displays here.
 	if((mins == 0) && (secs == 0)) {
 		
 	} else {
 		cd = setTimeout("redo()",1000);
 	}
}
function init() {
  cd();
  break;
}
</script>

Was This Post Helpful? 0
  • +
  • -

#4 CodeVillain  Icon User is offline

  • D.I.C Head

Reputation: 11
  • View blog
  • Posts: 143
  • Joined: 10-July 10

Re: Making this JavaScript timer reset when it's finished

Posted 16 November 2010 - 09:08 PM

I decided to just not have a displayed timer and instead just write a message to the page when time finishes. So until I need to actually create a timer I'm not going to bother with this anymore. Thanks for your helpt hough.
Was This Post Helpful? 0
  • +
  • -

#5 forest51690  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 58
  • View blog
  • Posts: 340
  • Joined: 20-March 09

Re: Making this JavaScript timer reset when it's finished

Posted 16 November 2010 - 09:24 PM

Hmm, I might have an idea as to why it's not working. The cd variable might be intersecting with both the function name and the variable name. Try renaming it to something else, like "t". I think the common practice is to use t for that kind of variable.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1