Simple countdown timer

Question

I want to create a simple countdown timer, I found something its working only for seconds, I want to add hours:minutes:seconds...

how can I make the same timer for hh:mm:ss

<script type="text/javascript">
    var seconds;
    var temp;
    function countdown() {
        seconds = document.getElementById('countdown').innerHTML;
        seconds = parseInt(seconds, 10);
        if (seconds == 1) {
            temp = document.getElementById('countdown');
            temp.innerHTML = "00";
            return;
        }
        seconds--;
        temp = document.getElementById('countdown');
        temp.innerHTML = seconds;
        timeoutMyOswego = setTimeout(countdown, 1000);
    }
    countdown();
</script>

Answer 1

var seconds;
var temp;

function countdown() {
    time = document.getElementById('countdown').innerHTML;
    timeArray = time.split(':')
    seconds = timeToSeconds(timeArray);
    if (seconds == '') {
        temp = document.getElementById('countdown');
        temp.innerHTML = "00:00:00";
        return;
    }
    seconds--;
    temp = document.getElementById('countdown');
    temp.innerHTML = secondsToTime(seconds);
    timeoutMyOswego = setTimeout(countdown, 1000);
}

function timeToSeconds(timeArray) {
    var minutes = (timeArray[0] * 60) + (timeArray[1] * 1);
    var seconds = (minutes * 60) + (timeArray[2] * 1);
    return seconds;
}

function secondsToTime(secs) {
    var hours = Math.floor(secs / (60 * 60));
    hours = hours < 10 ? '0' + hours : hours;
    var divisor_for_minutes = secs % (60 * 60);
    var minutes = Math.floor(divisor_for_minutes / 60);
    minutes = minutes < 10 ? '0' + minutes : minutes;
    var divisor_for_seconds = divisor_for_minutes % 60;
    var seconds = Math.ceil(divisor_for_seconds);
    seconds = seconds < 10 ? '0' + seconds : seconds;
    return hours + ':' + minutes + ':' + seconds;
}
countdown();

<div id="countdown">01:02:15</div>

Answer 2

if you have Seconds get hours and minutes as follow

            var hours = parseInt( Your seconds here / 3600 ) % 24;
            var minutes = parseInt( Your seconds here / 60 ) % 60;
            var seconds = Your seconds here % 60;

here your complete time in HH:MM:SS

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

Sort and sweet approach

Answer 3

You didn't say if you want to count up or down so here is a solution for both, just take the parts of the code you need:

(Fiddle: http://jsfiddle.net/Luc4oqo8/2/)

(I used jQuery here, you should use it too because its awesome)

HTML:

<div id="counter_up">
    <p id="h">00</p>:<p id="m">00</p>:<p id="s">00</p>
</div>
<div id="counter_dn">
    <p id="h">00</p>:<p id="m">00</p>:<p id="s">00</p>
</div>

JS:

var h_up = GetElementInsideContainer ("counter_up", "h");
var m_up = GetElementInsideContainer ("counter_up", "m");
var s_up = GetElementInsideContainer ("counter_up", "s");

var h_dn = GetElementInsideContainer ("counter_dn", "h");
var m_dn = GetElementInsideContainer ("counter_dn", "m");
var s_dn = GetElementInsideContainer ("counter_dn", "s");

// THIS COUNTS UP
setInterval ( function()
{
    if (parseInt(s_up.innerHTML) < 59)
    {
        s_up.innerHTML = parseInt(s_up.innerHTML) + 1;
        if (parseInt(s_up.innerHTML) < 10)
            s_up.innerHTML = "0" + s_up.innerHTML;
    }
    else
    {
        s_up.innerHTML = 0;

        if (parseInt(m_up.innerHTML) < 59)
        {
            m_up.innerHTML = parseInt(m_up.innerHTML) + 1;
            if (parseInt(m_up.innerHTML) < 10)
                m_up.innerHTML = "0" + m_up.innerHTML;
    }
    else
    {
        m_up.innerHTML = 0;

            if (parseInt (h_up.innerHTML) < 23)
            {
                h_up.innerHTML = parseInt(h_up.innerHTML) + 1;
                if (parseInt(h_up.innerHTML) < 10)
                    h_up.innerHTML = "0" + h_up.innerHTML;
            }
            else
            {
                h_up.innerHTML = m_up.innherHTML = s_up.innerHTML = 0;
            }
        };
    }
}, 1000);

// THIS COUNTS DOWN
setInterval ( function()
{
    if (parseInt(s_dn.innerHTML) > 0)
    {
        s_dn.innerHTML = parseInt(s_dn.innerHTML) - 1;
        if (parseInt(s_dn.innerHTML) < 10)
            s_dn.innerHTML = "0" + s_dn.innerHTML;
    }
    else
    {
        s_dn.innerHTML = 59;

        if (parseInt(m_dn.innerHTML) > 0)
        {
            m_dn.innerHTML = parseInt(m_dn.innerHTML) - 1;
            if (parseInt(m_dn.innerHTML) < 10)
                m_dn.innerHTML = "0" + m_dn.innerHTML;
        }
        else
        {
            m_dn.innerHTML = 59;

            if (parseInt (h_dn.innerHTML) > 0)
            {
                h_dn.innerHTML = parseInt(h_dn.innerHTML) - 1;
                if (parseInt(h_dn.innerHTML) < 10)
                    h_dn.innerHTML = "0" + h_dn.innerHTML;
            }
            else
            {
                h_dn.innerHTML = 23;
                m_dn.innherHTML = s_dn.innerHTML = 59;
            }
        };
    }
}, 1000);

// Very useful, got it from here: http://stackoverflow.com/questions/7171483/simple-way-to-get-element-by-id-within-a-div-tag
function GetElementInsideContainer(containerID, childID) 
{
    var elm = {};
    var elms =     document.getElementById(containerID).getElementsByTagName("*");
    for (var i = 0; i < elms.length; i++)
    {
        if (elms[i].id === childID)
        {
            elm = elms[i];
            break;
        }
    }
    return elm;
}

CSS:

p
{
    display: inline-block;
}

Answer 4

You may have different variables and different inner html's for the each part of your timer as hours for "hh", minutes for "mm" and seconds for "ss".. and for every step set the inner htmls equal to variables.

Initialize hours with some number and make it countdown by 1 when the others are zero and at the same time make the minutes and seconds equal to 59 and start counting down the seconds as the code you added above, then same thing goes for the minutes-seconds relation (when seconds are zero and minutes are not zero countdown minutes by one). At the end return if all the variables are zero.. Hope this helps..