PDA

View Full Version : Help with JS Coding Countdown Script

smsmasters
11-03-2005, 09:55 PM
<!-- START EXAMPLE CODE -->

<span id="textCountdown">~d~ days, ~h~ hours, ~m~ minutes and ~s~ seconds left till Christmas 2005!</span>

<script type="text/javascript" src="countdown.js"></script>
<script type="text/javascript">
//<![CDATA[
var textCountdown = new Countdown('textCountdown', 77);
textCountdown.setEndDate(2005, 12, 25);
textCountdown.start();
//]]>
</script>

<br />
<span id="textCountdown2">~d~ days, ~h~ hours, ~m~ minutes and ~s~ seconds left till New Year 2006!</span>
<script type="text/javascript" src="countdown.js"></script>
<script type="text/javascript">
//<![CDATA[
var textCountdown2 = new Countdown('textCountdown2', 77);
textCountdown2.setEndDate(2006, 01, 01);
textCountdown2.start();
//]]>
</script>

<!-- END EXAMPLE CODE -->




Can someone please modify this code so that when it is the actual event it says "Today is Christmas" and "Today is New Year".

Thanks

EDIT:

Here is countdown.js:


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.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];
}
}
}
akanevsky
11-03-2005, 10:56 PM
You should include countdown.js with your post.
smsmasters
11-04-2005, 08:47 AM
Added countdown.js

Thanks :)

Ok, I found another problem. The topic hover descriptions when you hover over the topic doesn't show up sometimes. I removed the code and it works fine. Here is the code I added to my header template:


<!-- START COUNTDOWN CODE-->

<span id="textCountdown">~d~ days, ~h~ hours, ~m~ minutes and ~s~ seconds left till Christmas 2005!</span>

<script type="text/javascript" src="countdown.js"></script>
<script type="text/javascript">
//<![CDATA[
var textCountdown = new Countdown('textCountdown', 77);
textCountdown.setEndDate(2005, 12, 25);
textCountdown.start();
//]]>
</script>

<br />
<span id="textCountdown2">~d~ days, ~h~ hours, ~m~ minutes and ~s~ seconds left till New Year 2006!</span>
<script type="text/javascript" src="countdown.js"></script>
<script type="text/javascript">
//<![CDATA[
var textCountdown2 = new Countdown('textCountdown2', 77);
textCountdown2.setEndDate(2006, 01, 01);
textCountdown2.start();
//]]>
</script>

<!--END COUNTDOWN CODE -->