Refresh After Countdown

I've been wrestling with this script for a while now, and I can't seem to make the page refresh when the countdown reaches zero. Most of my attempts end up in an endless loop of refreshes, or simply nothing at all. Perhaps somebody here knows the answer.

The script:

function Countdown(name, updateFrequency) {
	this.name = name;
	this.updateFrequency = updateFrequency;
	this.images = null;
	this.endDate = new Date();
	this.format = (document.getElementById && document.getElementById(this.name)) ? document.getElementById(this.name).innerHTML : '';
}

Countdown.prototype.setImages = function(num0, num1, num2, num3, num4, num5, num6, num7, num8, num9) {
	this.images = new Array(num0, num1, num2, num3, num4, num5, num6, num7, num8, num9);
	preloadImages(num0, num1, num2, num3, num4, num5, num6, num7, num8, num9);
};

Countdown.prototype.setEndDate = function(year, month, day, hour, minute, second, milliseconds) {
	this.endDate = new Date(year, month - 1, day, ( (hour) ? hour : 0), ( (minute) ? minute : 0), ( (second) ? second : 0), ( (milliseconds) ? milliseconds : 0));
}

Countdown.prototype.start = function() {
	this.update();
	setInterval(this.name + '.update()', (this.updateFrequency ? this.updateFrequency : 1000) );
};

Countdown.prototype.stop = function() {
	this.update();
	setInterval(this.name + '.update()', (this.updateFrequency ? this.updateFrequency : 0) );
};

Countdown.prototype.update = function() {
	
	// calculate the time until countdown end date
	var now = new Date();
	var difference = this.endDate - now;
	
	// decompose difference into days, hours, minutes and seconds parts
	var days    = parseInt(difference / 86400000) + '';
	var hours   = parseInt((difference % 86400000) / 3600000) + '';
	var minutes = parseInt((difference % 3600000) / 60000) + '';
	var seconds = parseInt((difference % 60000) / 1000) + '';
	var milliseconds = parseInt(difference % 1000) + '';
	
	// negative values should be set to 0
	if (isNaN(days) || days.charAt(0) == '-') days = '0';
	if (isNaN(hours) || hours.charAt(0) == '-') hours = '0';
	if (isNaN(minutes) || minutes.charAt(0) == '-') minutes = '0';
	if (isNaN(seconds) || seconds.charAt(0) == '-') seconds = '0';
	if (isNaN(milliseconds) || milliseconds.charAt(0) == '-') milliseconds = '0';
	
	// display changes differently for images and text countdowns
	if (this.images != null) {
		
		// single digit values should have a '0' prepended to them
		if (days.length == 1) days = '000' + days;
		else if (days.length == 2) days = '00' + days;
		else if (days.length == 3) days = '0' + days;
		if (hours.length == 1) hours = '0' + hours;
		if (minutes.length == 1) minutes = '0' + minutes;
		if (seconds.length == 1) seconds = '0' + seconds;
		if (milliseconds.length == 1) milliseconds = '00' + milliseconds;
		else if (milliseconds.length == 2) milliseconds = '0' + milliseconds;
		
		// update images
		if (document.images[this.name + '_d1000']) document.images[this.name + '_d1000'].src = this.images[parseInt(days.charAt(0))];
		if (document.images[this.name + '_d100']) document.images[this.name + '_d100'].src = this.images[parseInt(days.charAt(1))];
		if (document.images[this.name + '_d10']) document.images[this.name + '_d10'].src = this.images[parseInt(days.charAt(2))];
		if (document.images[this.name + '_d1']) document.images[this.name + '_d1'].src = this.images[parseInt(days.charAt(3))];
		if (document.images[this.name + '_h10']) document.images[this.name + '_h10'].src = this.images[parseInt(hours.charAt(0))];
		if (document.images[this.name + '_h1']) document.images[this.name + '_h1'].src = this.images[parseInt(hours.charAt(1))];
		if (document.images[this.name + '_m10']) document.images[this.name + '_m10'].src = this.images[parseInt(minutes.charAt(0))];
		if (document.images[this.name + '_m1']) document.images[this.name + '_m1'].src = this.images[parseInt(minutes.charAt(1))];
		if (document.images[this.name + '_s10']) document.images[this.name + '_s10'].src = this.images[parseInt(seconds.charAt(0))];
		if (document.images[this.name + '_s1']) document.images[this.name + '_s1'].src = this.images[parseInt(seconds.charAt(1))];
		if (document.images[this.name + '_ms100']) document.images[this.name + '_ms100'].src = this.images[parseInt(milliseconds.charAt(0))];
		if (document.images[this.name + '_ms10']) document.images[this.name + '_ms10'].src = this.images[parseInt(milliseconds.charAt(1))];
		if (document.images[this.name + '_ms1']) document.images[this.name + '_ms1'].src = this.images[parseInt(milliseconds.charAt(2))];
	}
	else if (this.format != '') {
		if (document.getElementById && document.getElementById(this.name)) {
			var html = this.format;
			html = html.replace(/~d~/, days);
			html = html.replace(/~h~/, hours);
			html = html.replace(/~m~/, minutes);
			html = html.replace(/~s~/, seconds);
			html = html.replace(/~ms~/, milliseconds);
			
			document.getElementById(this.name).innerHTML = html;
		}
	}
};

// Image preloader
function preloadImages() {
	if (document.images) {
		for (var i = 0; i < preloadImages.arguments.length; i++) {
			(new Image()).src = preloadImages.arguments[i];
		}
	}
}

Code (javascript):

Thanks.

 

Can you provide the rest of the code?

 

That's all there is too it. Except for the implementation in the page, of course. Here it is:

<script type="text/javascript" src="countdown.js">
<script type="text/javascript">
//<![CDATA[
var myCountdown = new Countdown('myCountdown', 43);
myCountdown.setImages('0.gif', '1.gif', '2.gif', '3.gif', '4.gif', '5.gif', '6.gif', '7.gif', '8.gif', '9.gif');
myCountdown.setEndDate(2008, 4, 1, 9, 1, 0, 0);
myCountdown.start();
//]]>
</script>

Code (javascript):

From this page: http://dithered.chadlindstrom.ca/javascript/countdown/index.html

 

Is the problem that the date that you have set is over a year ago?
var difference = this.endDate - now;
Would that not result in a negative value?

myCountdown.setEndDate(2008, 4, 1, 9, 1, 0, 0);
Is setting the date to 1/4/2008 .... (d/m/yyyy)

 

That's just an example. It's not coded like that on my site.

 

hrm... would something like that work?

Countdown.prototype.setEndDate = function(year, month, day, hour, minute, second, milliseconds) {
    this.endDate = new Date(year, month - 1, day, ( (hour) ? hour : 0), ( (minute) ? minute : 0), ( (second) ? second : 0), ( (milliseconds) ? milliseconds : 0));
    // store original date here for reference
    this.originalDate = {
        year: year,
        month: month - 1,
        day: day, 
        ... 
    };
}

...
    if (isNaN(days) || days.charAt(0) == '-') days = '0';
    if (isNaN(hours) || hours.charAt(0) == '-') hours = '0';
    if (isNaN(minutes) || minutes.charAt(0) == '-') minutes = '0';
    if (isNaN(seconds) || seconds.charAt(0) == '-') seconds = '0';
    if (isNaN(milliseconds) || milliseconds.charAt(0) == '-') milliseconds = '0';

    if (days === '0' && hours === '0' && minutes === '0' && seconds === '0' && miliseconds === '0') {
        // it has finished and its 00-00-00-00 - you get the idea.
        // new end date needs to be set, you need to compute when that is.
        // for example, add another year
        this.originalDate.year++;
        this.setEndDate(this.originalDate.year, this.originalDate.month, this.originalDate.day, this.originalDate.hour, this.originalDate.minute, this.originalDate.seconds, this.originalDate.miliseconds);
        this.start();
    }

Code (javascript):

you really need to code a function like - calc now + 30 min -> endDate format so you can always restart. if its an annual thing then it's easy- just store the initial params and then add to it so you can do a countdown to the new year or a countdown to the first of the month etc.

obviously this is not tested and you just need to use it as an idea

 

The date is actually determined by PHP in the page itself (which is what decides even if the countdown should be displayed). What I need is a page refresh when the countdown reaches zero (and I've tried conditional statements involving the "difference" variable, which is essentially what you've coded). For some reason my attempts are always futile.

 

look - i don't know what you've been doing but i just tested this line for the update function and it works:

Countdown.prototype.update = function() {
    
    // calculate the time until countdown end date
    var now = new Date();
    var difference = this.endDate - now;
    
    // decompose difference into days, hours, minutes and seconds parts
    var days    = parseInt(difference / 86400000) + '';
    var hours   = parseInt((difference % 86400000) / 3600000) + '';
    var minutes = parseInt((difference % 3600000) / 60000) + '';
    var seconds = parseInt((difference % 60000) / 1000) + '';
    var milliseconds = parseInt(difference % 1000) + '';
    
    // negative values should be set to 0
    if (isNaN(days) || days.charAt(0) == '-') days = '0';
    if (isNaN(hours) || hours.charAt(0) == '-') hours = '0';
    if (isNaN(minutes) || minutes.charAt(0) == '-') minutes = '0';
    if (isNaN(seconds) || seconds.charAt(0) == '-') seconds = '0';
    if (isNaN(milliseconds) || milliseconds.charAt(0) == '-') milliseconds = '0';
    
    // added by dimitar to reload page.
    if (days === '0' && hours === '0' && minutes === '0' && seconds === '0' && milliseconds === '0') 
        window.location.href = window.location.href;
    
    // display changes differently for images and text countdowns
    if (this.images != null) {
        
        // single digit values should have a '0' prepended to them
        if (days.length == 1) days = '000' + days;
        else if (days.length == 2) days = '00' + days;
        else if (days.length == 3) days = '0' + days;
        if (hours.length == 1) hours = '0' + hours;
        if (minutes.length == 1) minutes = '0' + minutes;
        if (seconds.length == 1) seconds = '0' + seconds;
        if (milliseconds.length == 1) milliseconds = '00' + milliseconds;
        else if (milliseconds.length == 2) milliseconds = '0' + milliseconds;
        
        // update images
        if (document.images[this.name + '_d1000']) document.images[this.name + '_d1000'].src = this.images[parseInt(days.charAt(0))];
        if (document.images[this.name + '_d100']) document.images[this.name + '_d100'].src = this.images[parseInt(days.charAt(1))];
        if (document.images[this.name + '_d10']) document.images[this.name + '_d10'].src = this.images[parseInt(days.charAt(2))];
        if (document.images[this.name + '_d1']) document.images[this.name + '_d1'].src = this.images[parseInt(days.charAt(3))];
        if (document.images[this.name + '_h10']) document.images[this.name + '_h10'].src = this.images[parseInt(hours.charAt(0))];
        if (document.images[this.name + '_h1']) document.images[this.name + '_h1'].src = this.images[parseInt(hours.charAt(1))];
        if (document.images[this.name + '_m10']) document.images[this.name + '_m10'].src = this.images[parseInt(minutes.charAt(0))];
        if (document.images[this.name + '_m1']) document.images[this.name + '_m1'].src = this.images[parseInt(minutes.charAt(1))];
        if (document.images[this.name + '_s10']) document.images[this.name + '_s10'].src = this.images[parseInt(seconds.charAt(0))];
        if (document.images[this.name + '_s1']) document.images[this.name + '_s1'].src = this.images[parseInt(seconds.charAt(1))];
        if (document.images[this.name + '_ms100']) document.images[this.name + '_ms100'].src = this.images[parseInt(milliseconds.charAt(0))];
        if (document.images[this.name + '_ms10']) document.images[this.name + '_ms10'].src = this.images[parseInt(milliseconds.charAt(1))];
        if (document.images[this.name + '_ms1']) document.images[this.name + '_ms1'].src = this.images[parseInt(milliseconds.charAt(2))];
    }
    else if (this.format != '') {
        if (document.getElementById && document.getElementById(this.name)) {
            var html = this.format;
            html = html.replace(/~d~/, days);
            html = html.replace(/~h~/, hours);
            html = html.replace(/~m~/, minutes);
            html = html.replace(/~s~/, seconds);
            html = html.replace(/~ms~/, milliseconds);
            
            document.getElementById(this.name).innerHTML = html;
        }
    }
};

Code (javascript):

essentially,

    if (days === '0' && hours === '0' && minutes === '0' && seconds === '0' && milliseconds === '0') 
        window.location.href = window.location.href;

PHP:

note i use === (which is js's way of typecasting), for example if days = 0 it's also false so if you did days = false; if (days == '0') would be true whereas it really is not. using === or !== also checks type of variable, perhaps yopu were failing due to this.

 

dimitar christoff, sorry if my last message sounded a bit short. I was in a hurry and on my way out the door when I responded. Your help is not unappreciated.

I'll try that last suggestion and keep you posted.

Thanks,
Peter

 

The fact that the script prohibits negative values makes it refresh continuously when it reaches the new code. I tried changing the conditional statement to examine the value of "difference," but nothing would happen when it reached zero. Any suggestions?

Thanks again,
Peter

 

mate - i tested it on your christmas coutdown page and it reloaded and restarted it fine using the code that i pasted (obviously i set the end date to 1-2 mins from the test).

 

You're right. I guess I missed something last time I tried it.

Thanks for the help. +1