Javascript PHP Good countdown timer

Question

Basically I'm any good at javascript and I would like a better countdown timer for my project. At the moment my timer looks something like this:

01:25:05

I would like it to look like this:

1 hour, 25 minutes and 5 seconds

But I also want it to be clever. So if its just 25 minutes it will say:

25 minutes.

---

This is my current javascript code:

function secondCountdown(){ 
    if(typeof(skip) == "undefined"){
        skip = "set";
    } else {
        var timeleft = document.getElementById("timeleft").innerHTML;
        var time_split = timeleft.split(":");

        if(parseInt(time_split[0]) < 10){
            time_split[0] = time_split[0].charAt(1);
        }

        if(parseInt(time_split[1]) < 10){
            time_split[1] = time_split[1].charAt(1);
        }

        if(parseInt(time_split[2]) < 10){
            time_split[2] = time_split[2].charAt(1);
        }

        seconds = parseInt(time_split[2]) + parseInt(time_split[1]*60) + parseInt(time_split[0]*3600);
        seconds -= 1;

        if(seconds > 0){
                var hours= Math.floor(seconds/3600);
                seconds %= 3600;
                var minutes = Math.floor(seconds/60);
                seconds %= 60;

                var timeleft = ((hours < 10) ? "0" : "") + hours + ":" + ((minutes < 10) ? "0" : "") + minutes + ":" + ((seconds < 10) ? "0" : "") + seconds;

            document.getElementById("timeleft").innerHTML = timeleft;
        } else {
            document.getElementById("timeleft").innerHTML = "";
            window.location='test.php?pageid=' + getURLParam("pageid");
            return false;
        }
  }

  setTimeout("secondCountdown()",1000);
}
window.onload = secondCountdown;

Maybe someone could edit it for me to make it output what I want?

Edit:

This is the PHP side of the timer.

<span id="timeleft">
$master = $timer['gta_time'] - time();

                echo date( "00:i:s", $timer['gta_time'] - time() ); 


</span>

Answer 1

Ooh, just seen I'm a bit slow with this, but it seems to work so I'll add it anyway. :)

function parseTime() {
    var timeLeftStr;
    var timeLeft = 0;

    timeLeftStr = document.getElementById("timeleft").innerHTML;

    timeLeftStr.replace(/(\d+):(\d+):(\d+)/, function () {
        for (var i = 1; i < arguments.length - 2; i++) {
            // Convert to ms
            timeLeft += arguments[i] * Math.pow(60, 3 - i) * 1000;
        }
    });

    countdown(new Date(timeLeft));
}

function countdown(timeLeft) {
    var hours = timeLeft.getUTCHours();
    var minutes = timeLeft.getUTCMinutes();
    var seconds = timeLeft.getUTCSeconds();

    if (timeLeft.valueOf() == 0) {
        document.getElementById("timeleft").innerHTML = "";
        window.location = 'test.php?pageid=' + getURLParam("pageid");
        return false;
    } else {
        document.getElementById("timeleft").innerHTML =
            (hours == 0 ? "" : hours + (hours == 1 ? " hour" : " hours")) +
            (minutes == 0 ? "" : (hours ? (seconds ? ", " : " and ") : " ") + minutes + (minutes == 1 ? " minute" : " minutes")) +
            (seconds == 0 ? "" : (hours || minutes ? " and " : "") + seconds + (seconds == 1 ? " second" : " seconds"));

        setTimeout(function () { countdown(new Date(timeLeft - 1000)); }, 1000);
    }
}

window.onload = parseTime;

Edit to remove skip.

Edit 2 to remove start & end checks on regex, add , and and support.

Edit 3 to use getUTCHours, etc. so it works in other timezones (oops).

Answer 2

Instead of this line:

var timeleft = ((hours < 10) ? "0" : "") + hours + ":" + ((minutes < 10) ? "0" : "") + minutes + ":" + ((seconds < 10) ? "0" : "") + seconds;

Say something like this for a basic solution:

var timeleft = (hours > 0 ? hours + " hours " : "")
             + (minutes > 0 ? minutes + " minutes " : "")
             + (seconds > 0 ? seconds + " seconds " : "");

Or in full:

var timeleft = "";
if (hours > 0)
   timeleft += hours + (hours > 1 ? " hours" : " hour");
if (minutes > 0) {
   if (hours > 0)
       timeleft += seconds > 0 ? ", " : " and ";
   timeleft += minutes + (minutes > 1 ? " minutes" : " minute");
}
if (seconds > 0) {
   if (timeleft != "")
      timeleft += " and ";
   timeleft += seconds + (seconds > 1 ? " seconds" : " second");
}

Answer 3

Ok, I made this now, and it works (I tested in Opera):

Date.prototype.toTimeString = function()
{
    var toReturnTime = new Array();
    var times = [this.getHours(), this.getMinutes(), this.getSeconds()];
    var times_names = [' hour', ' minute', ' second'];
    var tmp = null;
    for (var i=0; i<times.length; i++)
    {
    tmp = times[i];
    if (tmp > 0)
    {
        toReturnTime.push(tmp + times_names[i] + (tmp == 1 ? '' : 's'));
        toReturnTime.push(', ');
    }
    }
    if (toReturnTime.length/2 >= 2)
    {
    toReturnTime.pop();
    tmp = toReturnTime.pop();
    toReturnTime.pop();
    toReturnTime.push(' and ' + tmp);
    }
    else
    toReturnTime.pop();
    return toReturnTime.join('');
}


var date, timeleft;

function secondCountdown()
{
    date.setSeconds(date.getSeconds() - 1);
    timeleft.innerHTML = date.toTimeString();
    if ((date.getHours() + date.getMinutes() + date.getSeconds()) > 0)
    setTimeout("secondCountdown()",1000);
    else
    timeleft.innerHTML = 'ITS OVER';
}

function init()
{
    timeleft = document.getElementById("timeleft");
    var time_split = timeleft.innerHTML.split(":");
    date = new Date(0, 0, 0, parseInt(time_split[0]), parseInt(time_split[1]), parseInt(time_split[2]));
    secondCountdown();
}
window.onload = init;