Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Putting in a line break?

    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);
    }
    I've tried
    Code:
    clockText.nodeValue = daysLeft + ' day' + dps + '/n';
    which just added some spaces to the end the day count.

    And I tried this,
    Code:
    clockText.nodeValue = daysLeft + ' day' + dps + '<br>';
    which made it look like: 67 days<br>19 hours<br>1 minute<br>54 seconds

    Any ideas? Thanks!

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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*

  • #3
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How would I change the innerHTML??

  • #4
    Regular Coder
    Join Date
    Aug 2004
    Location
    codegoboom@yahoo.com
    Posts
    999
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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*

  • #5
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by codegoboom
    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.

  • #6
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I searced around and found a different countdown script that I tweaked to make it appear like:

    _ days
    _ hours
    _ minutes
    _ seconds

    However, the countdown script is off by about 1,300,000 days. It shows that there are

    1387988 days
    14 hours
    42 minutes
    15 seconds

    left until March 18, 2005 at 5:30 am. Here is the script, anyone know why it isn't working??

    Code:
    function countdown_clock(year, month, day, hour, minute, format)
             {
             //I chose a div as the container for the timer, but
             //it can be an input tag inside a form, or anything
             //who's displayed content can be changed through
             //client-side scripting.
             html_code = '<div id="countdown"></div>';
             
             document.write(html_code);
             
             countdown(year, month, day, hour, minute, format);                
             }
             
    function countdown(year, month, day, hour, minute, format)
             {
             Today = new Date();
             Todays_Year = Today.getYear() - 2000;
             Todays_Month = Today.getMonth() + 1;                  
             
             //Convert both today's date and the target date into miliseconds.                           
             Todays_Date = (new Date(Todays_Year, Todays_Month, Today.getDate(), 
                                     Today.getHours(), Today.getMinutes(), Today.getSeconds())).getTime();                                 
             Target_Date = (new Date(year, month, day, hour, minute, 00)).getTime();                  
             
             //Find their difference, and convert that into seconds.                  
             Time_Left = Math.round((Target_Date - Todays_Date) / 1000);
             
             if(Time_Left < 0)
                Time_Left = 0;
             
             switch(format)
                   {
                   case 0:
                        //The simplest way to display the time left.
                        document.all.countdown.innerHTML = Time_Left + ' seconds';
                        break;
                   case 1:
                        //More datailed.
                        days = Math.floor(Time_Left / (60 * 60 * 24));
                        Time_Left %= (60 * 60 * 24);
                        hours = Math.floor(Time_Left / (60 * 60));
                        Time_Left %= (60 * 60);
                        minutes = Math.floor(Time_Left / 60);
                        Time_Left %= 60;
                        seconds = Time_Left;
                        
                        dps = 's'; hps = 's'; mps = 's'; sps = 's';
                        //ps is short for plural suffix.
                        if(days == 1) dps ='';
                        if(hours == 1) hps ='';
                        if(minutes == 1) mps ='';
                        if(seconds == 1) sps ='';
                        
                        document.all.countdown.innerHTML = days + ' day' + dps + '<br>';
                        document.all.countdown.innerHTML += hours + ' hour' + hps + '<br>';
                        document.all.countdown.innerHTML += minutes + ' minute' + mps + '<br>';
                        document.all.countdown.innerHTML += seconds + ' second' + sps;
                        break;
                   default: 
                        document.all.countdown.innerHTML = Time_Left + ' seconds';
                   }
                   
             //Recursive call, keeps the clock ticking.
             setTimeout('countdown(' + year + ',' + month + ',' + day + ',' + hour + ',' + minute + ',' + format + ');', 1000);
             }
    The code I am using on my HTML page:

    Code:
    <script type="text/javascript">countdown_clock(05, 03, 18, 05, 30, 1);</script>

  • #7
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    Todays_Year = Today.getFullYear() - 2000;
    Also, use document.getElementById() instead of document.all.

  • #8
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks!!! It works perfectly now!!

    Just one other thing...how can I change the font and size of the countdown's text??

  • #9
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    You could use some CSS, heres a quick example...
    in the head:
    Code:
    <style type="text/css">
    #countdown {
    	font-size: 22px;
    	color: blue;
    }
    </style>
    ......and your div tag
     html_code = '<div id="countdown" class="countdown"></div>';

  • #10
    New Coder
    Join Date
    Jan 2005
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks again, that did the trick!

  • #11
    teh Moderatorinator
    Join Date
    Sep 2004
    Location
    USA
    Posts
    2,472
    Thanks
    4
    Thanked 40 Times in 40 Posts
    You're welcome


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •