Hi. I have some javascript that I found to make a countdown clock. It works perfectly, but it shows the countdown all on one line like this:
67 days 19 hours 1 minute 54 seconds
How can I make the countdown appear on different lines like this:
67 days
19 hours
1 minute
54 seconds
Here is the script:
Code:
function initCountdown(year, month, day, hours, minutes, id_name) {
//Write in the HTML for the element that will hold the timer text.
//I chose a SPAN as the container for the timer, but
//it can be any HTML element that can contain text node 'children'
html_code = '<span id="'+id_name+'"></div>';
document.writeln(html_code);
doCountdown(year, month, day, hours, minutes, id_name);
}
function doCountdown(year, month, day, hours, minutes, id_name) {
//Make date objects for todays date and target (requested) date
Todays_Date = new Date();
//Adjust requested month because the month in the Date object is zero based
dateObjMonth = month-1;
Target_Date = new Date(year, dateObjMonth, day, hours, minutes);
//Convert both today's date and the target date into miliseconds since Unix Epoch.
Today_MS = Todays_Date.getTime();
Target_MS = Target_Date.getTime();
//Find their difference, and convert that into seconds.
Time_Left = Math.round((Target_MS - Today_MS) / 1000);
//If target date was before todays date, time left til target date should display as 0
if(Time_Left < 0){
Time_Left = 0;
}
//Create text node to hold text of countdown
var clockText = document.createTextNode('');
//Get the number of days til target date
daysLeft = Math.floor(Time_Left / ( 60 //seconds in a minure
* 60 //minutes in an hour
* 24 //hours in a day
)
);
//Remainder of same operation from above is the number of seconds left to calculate
Time_Left %= ( 60 //seconds in a minure
* 60 //minutes in an hour
* 24 //hours in a day
);
//Get the number of hours til target date
hoursLeft = Math.floor(Time_Left / ( 60 //seconds in a minute
* 60 //minutes in an hour
)
);
//Remainder of same operation from above is the number of seconds left to calculate
Time_Left %= ( 60 //seconds in a minute
* 60 //minutes in an hour
);
//Get the number of minutes left til target date
minutesLeft = Math.floor(Time_Left / 60 //seconds in a minute
);
//Remainder of same operation from above is the number of seconds left to calculate
Time_Left %= 60; //second in a minute
//Duh:
secondsLeft = Time_Left;
//'ps' is short for plural suffix--grammatical purposes.
dps = 's'; hps = 's'; mps = 's'; sps = 's';
//Remove plural suffix where necessary
if(daysLeft == 1) dps ='';
if(hoursLeft == 1) hps ='';
if(minutesLeft == 1) mps ='';
if(secondsLeft == 1) sps ='';
//Assemble countdown text
clockText.nodeValue = daysLeft + ' day' + dps + ' ';
clockText.nodeValue += hoursLeft + ' hour' + hps + ' ';
clockText.nodeValue += minutesLeft + ' minute' + mps + ' ';
clockText.nodeValue += secondsLeft + ' second' + sps;
//Get the element (by ID) to which we will write the timer text
var element = document.getElementById(id_name);
//Does it currently have a child node (meaning we have already written timer text)?
if (element.childNodes.length > 0) {
//If so, get that object
oldChild = element.childNodes[0];
//And replace it with new timer text (avoids stacking the entries on top of each other)
element.replaceChild(clockText,oldChild);
}
else {
//If not, append the timer text
element.appendChild(clockText);
}
//Recursive call, keeps the clock ticking.
setTimeout('doCountdown(' + year + ',' + month + ',' + day + ',' + hours + ',' + minutes + ',"' + id_name +'");', 1000);
}
Well, it's a textNode, so you may have to put it in a textarea, or instead, create elements or change innerHTML, or something...
BTW, that function appears to repeat a lot of unnecessary processes each second.
__________________
*this message will self destruct in n-seconds*
I'd tell you, but would end up rewriting the whole script, as usual; though, hopefully, someone else may be more helpful.
In the mean time, the references thread in this forum links to documentation which explains innerHTML, and other such things.
__________________
*this message will self destruct in n-seconds*
I'd tell you, but would end up rewriting the whole script, as usual; though, hopefully, someone else may be more helpful.
In the mean time, the references thread in this forum links to documentation which explains innerHTML, and other such things.
Oh. Thanks.
If anyone else knows how to rewrite or fix the script so the countdown is on different lines, could you please help? Thanks a lot.
Before you post, read our: 
Putting in a line break?
