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.
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)
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).