Question

The countdown is displaying as following HOUR & MIN & SEC. example 48Hours 12MIN 02 SECONDS.

1. I tried to modify it so that it displays 2Days 0Hours 12Min 02Seconds, but when I do that the code breaks.

2. Another issue I have is that once the countdown is almost complete, it appears as 00 00 00.

P.S. The code might look quite long, but most of it are variable being assigned, I included them just to prevent confusion.

Have fun:

function countdown(yr,m,d,hr,min,sec,id_d,url,gettimezone){

// Here I skipped some Variable assigments. That help define futurestring andd todaystring.

    //Main Variable assignments START
var dd=futurestring-todaystring;
    // futurstring - todaystring are self-explanatory, the future date - todays date.     
var dday=Math.floor(dd/(60*60*1000*24)*1);

var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);

dday = (dday*24)+dhour; //converted days to hour

var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);

var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
    //Main Variable assignments END

     //Here is where it really starts.

    if(dday<=0&&dmin<=0&&dsec<=0) //I believe this is causing issue 2, this should be displaying the 00s if the countdown is over.
    {
        document.getElementById(id_de+'tot_hrs2').innerHTML='00';
        document.getElementById(id_de+'tot_mins2').innerHTML='00';
        document.getElementById(id_d+'tot_secs2').innerHTML='00';
        setTimeout("redirect_url_fn('"+url+"')",2000);

    }
    else 
    {
        if(dday<10)
         {
          dday='0'+dday;
         }
         if(dmin<10)
         {
          dmin='0'+dmin;
         }
         if(dsec<10)
         {
          dsec='0'+dsec;
         }


                    //Tried replacing dday with dhour & adding dday while

                    //Removing dday = (dday*24)+dhour; //converted days to hour

                    //But I don't get the correct countdown time in D-H-M-S format

        document.getElementById(id_de+'tot_hrs2').innerHTML=dday;

        document.getElementById(id_de+'tot_mins2').innerHTML=dmin;

        document.getElementById(id_d+'tot_secs2').innerHTML=dsec;

        setTimeout("countdown('"+year+"','"+month+"','"+day+"','"+hour+"','"+minute+"','"+second+"','"+id_de+"','"+url+"','"+tz+"')",1000);
        //setTimeout("cou("+id_d+")",1000);
        //setTimeout("redirect_url_fn('"+url+"')",2000);
                  if(dday<=0) // dday zero allowed here
             {
            document.getElementById(id_de+'tot_hrs2').innerHTML=''; 
                document.getElementById('hrs').innerHTML='';                    
             }      

    }

}

Answer 1

Consider that what you care about is the difference between the current date and the date you pass to countdown. The actual date objects are not necessary — and certainly the date strings aren’t. You could condense all that date stringification, parsing, and subtraction down to two lines:

var future = Date.UTC(year, month, day, hour, min, sec) - (gettimezone * 1000 * 60 * 60);
var ms_til_then = future - Date.now();

(assuming gettimezone is the hours from UTC. EST would be -5, for example.)

Now, as for your code:

function countdown(yr,m,d,hr,min,sec,id_de,url,tz){
    // You had 3 sets of vars that were all equal and meant the exact same thing.
    // Those are now gone.

    // i hate repetitive math with a thug passion.
    // use these instead of 1000*60*60*24 and whatever all over the place.
    var MS_PER_SEC  = 1000,
        MS_PER_MIN  = MS_PER_SEC * 60,
        MS_PER_HOUR = MS_PER_MIN * 60,
        MS_PER_DAY  = MS_PER_HOUR * 24;

    // The two lines i mentioned above
    var future_time = Date.UTC(yr, m-1, d, hr, min, sec) - (tz * MS_PER_HOUR); 
    var dd = future_time - Date.now();

    // The dhour, dmin, dsec etc stuff can wait a bit

    // Here, we care if the "future time" is past the current time, right?
    // We already have a number that represents the difference between the two.
    // If dd <= 0, then the time has passed.
    if(dd <= 0)
    {
        // Note, we're doing the same thing with the elements as we would if dd==0.
        // Let's not repeat ourselves; the only major difference between the two is
        // what we set for the callback and when it happens.
        // So here, let's let dd=0 and let both branches do the same thing with the
        // date elements.
        dd = 0;
        // Remind me to smack whoever taught you this was right.
        // setTimeout("redirect_url_fn('"+url+"')",2000);
        // Instead, we specify the function directly, saving parsing and avoiding the
        // dirty looks we get when we eval stuff.
        // Note we can pass params to the function; we just put them after the timeout.
        setTimeout(redirect_url_fn, 2000, url);
    }
    else 
    {
        // Again...no need to compose a string to call ourselves again.
        // If we wanted to get fancy, we could wrap most of the meat of this function
        // up in a closure, and call it, and not have to keep passing all these params.
        // But that's spiff for another time.
        setTimeout(countdown, 1000, yr, m, d, hr, min, sec, id_de, url, tz);
    }

    // Moving all this closer to where it's used.
    var dday=Math.floor(dd/MS_PER_DAY);
    var dhour=Math.floor((dd%MS_PER_DAY)/MS_PER_HOUR);
    // math time: if a and b are positive, and a is divisible by b, then ((n%a)%b)==n%b
    // Meaning: We can simplify this crap.
    var dmin=Math.floor((dd % MS_PER_HOUR) / MS_PER_MIN);
    var dsec=Math.floor((dd % MS_PER_MIN) / MS_PER_SEC);
    // I had to fix this; it was bugging me.  When you have a variable named
    // dDAY that contains HOURS, your variable names are lying to you.
    dhour = (dday*24)+dhour; // Converting days+hours to just hours

    if(dhour<10)
    {
        dhour='0'+dhour;
    }
    if(dmin<10)
    {
        dmin='0'+dmin;
    }
    if(dsec<10)
    {
        dsec='0'+dsec;
    }

    document.getElementById(id_de+'tot_hrs2').innerHTML=dhour;
    document.getElementById(id_de+'tot_mins2').innerHTML=dmin;
    document.getElementById(id_de+'tot_secs2').innerHTML=dsec;

    // Don't need <= here; if we're in this part of the code, dhour is not negative
    if(dhour==0)
    {
        // hide hours and label
        document.getElementById(id_de+'tot_hrs2').innerHTML=''; 
        document.getElementById('hrs').innerHTML='';
    }
}

// for example, to count down to new years...
countdown(2012, 1, 1, 0, 0, 0, '', 'http://happynewyear.com', -5);

I’d also suggest that countdown take a Date object rather than a bunch of date parts. But for now, i’m done changing stuff.

OK, now that it’s readable, let’s see about these issues.

If you want to show days, then you need to get rid of that line that says dhour = (dday * 24) + dhour;. That converts days+hours into just hours. You’ll also need to add a line that sets the element’s content just like you have with the hours, minutes, and seconds.

Also, see that section near the end there that starts if (dhour == 0)…? That needs to either go away or change to dday (and the code needs to change to set the day elements rather than the hour ones).

Oops…looks like i might have accidentally fixed the second issue already 😛