...

View Full Version : Only Letting the Timer Count for x seconds?



KodiTiger
12-22-2010, 10:27 PM
Hi, I'm trying to adapt a script I found online for a timer that goes in my webpage. The timer counts from 30 seconds down to 0. I've adapted it so that when it reaches 0 it goes back up to 30, but I was wondering how can I make it so that after a certain number of loops through the timer, it executes some other (non-JS) code instead of just doing the timer forever?

I've introduced a variable t to try to do this, but when I put in if(t>1) {break} at the bottom, the timer doesn't work properly anymore (it doesn't display a number in the box).

Thanks a lot for any help :) .

<script>
<!--
//
var t=0
var milisec=0
var seconds=30
document.counter.d2.value='30'

function display(){
if (milisec<=0){
milisec=9
seconds-=1
}
if (seconds<=-1){
milisec=0
seconds=30
t+=1
}

else
milisec-=1
document.counter.d2.value=seconds+"."+milisec
setTimeout("display()",100)
}
display()



-->
</script>

DJCMBear
12-22-2010, 11:33 PM
Try this.



<!DOCTYPE html>
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
(function($){
$.Timer = {
Total: 0, // Keep as 0 for the default total
Display: function(o,newLength){
var timer = document.getElementById(o.target);
if(timer) {
if(newLength === undefined) {o.length = o.length +1;} // Fix the timer length on start
if($.Timer.Total == o.loops) {
if(o.success !== undefined && typeof o.success == 'function') {
o.success(); // Run the success function
}
} else {
var olength = o.length, // Store the default timer length
newLength = (newLength !== undefined)?newLength-1:o.length-1; // Running the countdown
timer.innerHTML = newLength; // Updating the timer
if(newLength == 0) {
newLength = olength; // Reset the timer length
$.Timer.Total = $.Timer.Total + 1; // Adding '1' to the total
}
setTimeout(Timer.Display,1000,o,newLength); // Re-running the countdown
}
}
}
};
})(window);

window.onload = (function(){
Timer.Display({
target: 'countdown',
length: 30,
loops: 2,
success: function(){
/**
* In this function you can use 'this' as the root so for example
* if you add an item to the object above you can use it in this
* function, like the example below.
*/
var target = document.getElementById(this.target);
target.innerHTML='<input type="button" onclick="alert(\'The countdown finished!\');" value="Finished" />';
}
});
});

/**
* You can even add your own object items to use in your success function
* window.onload = (function(){
* Timer.Display({
* target: 'countdown',
* length: 30,
* loops: 2,
* finishedText: 'The countdown finished!',
* success: function(){
* var target = document.getElementById(this.target);
* target.innerHTML='<input type="button" onclick="alert(\''+this.finishedText+'\');" value="Finished" />';
* }
* });
* });
*/
</script>
</head>
<body>
<span id="countdown"></span>
</body>
</html>
</html>

KodiTiger
12-23-2010, 01:01 AM
Oh wow, that's fantastic, thanks so much for that! Much appreciated :) :thumbsup: !

KodiTiger
12-23-2010, 11:14 PM
Hmm, it works in Firefox and Google Chrome, but not in Internet Explorer (version 8 if that's important). Any idea why that would be and how to fix it?

DJCMBear
12-23-2010, 11:20 PM
I'll have a look in a bit and see what I can do.

KodiTiger
12-25-2010, 10:22 PM
I'll have a look in a bit and see what I can do.

Thanks :) managed to come up with anything yet?

DJCMBear
12-26-2010, 02:51 AM
Thanks :) managed to come up with anything yet?

Sorry I will do it now, it was christmas today so wasn't really doing many codes.

DJCMBear
12-26-2010, 03:04 AM
Here is a fixed code works in every major browser



<!DOCTYPE html>
<html>
<head>
<title>Countdown</title>
<script type="text/javascript">
(function($){
$.Timer = {
Total: 0, // Keep as 0 for the default total
Display: function(o,newLength){
var timer = document.getElementById(o.target);
if(timer) {
if(newLength === undefined) {o.length = o.length +1;} // Fix the timer length on start
if($.Timer.Total == o.loops) {
if(o.success !== undefined && typeof o.success == 'function') {
o.success(); // Run the success function
}
} else {
var olength = o.length, // Store the default timer length
newLength = (newLength !== undefined)?newLength-1:o.length-1; // Running the countdown
timer.innerHTML = newLength; // Updating the timer
if(newLength == 0) {
newLength = olength; // Reset the timer length
$.Timer.Total = $.Timer.Total + 1; // Adding '1' to the total
}
setTimeout(function(){Timer.Display(o,newLength);},1000); // Re-running the countdown
}
}
}
};
})(window);

window.onload = (function(){
Timer.Display({
target: 'countdown',
length: 30,
loops: 2,
success: function(){
/**
* In this function you can use 'this' as the root so for example
* if you add an item to the object above you can use it in this
* function, like the example below.
*/
var target = document.getElementById(this.target);
target.innerHTML='<input type="button" onclick="alert(\'The countdown finished!\');" value="Finished" />';
}
});
});

/**
* You can even add your own object items to use in your success function
* window.onload = (function(){
* Timer.Display({
* target: 'countdown',
* length: 30,
* loops: 2,
* finishedText: 'The countdown finished!',
* success: function(){
* var target = document.getElementById(this.target);
* target.innerHTML='<input type="button" onclick="alert(\''+this.finishedText+'\');" value="Finished" />';
* }
* });
* });
*/
</script>
</head>
<body>
<span id="countdown"></span>
</body>
</html>
</html>

KodiTiger
12-27-2010, 04:14 AM
Thanks very much for that, much appreciated!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum