简单的倒数计时器

Question

我想创建一个简单的倒数计时器，我发现它只能工作几秒钟，我想添加 hours:minutes:seconds...

如何为 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

您的计时器的每个部分可能有不同的变量和不同的内部 html，如 "hh" 的小时数、"mm" 的分钟数和 [=16= 的秒数].. 并为每一步设置内部 htmls 等于变量。

用一些数字初始化小时，当其他数字为零时使它倒计时1，同时使分钟和秒等于59并开始倒计时秒作为你上面添加的代码，然后同样的事情适用于分钟-秒关系（当秒为零且分钟不为零时倒计时一分钟）。最后 return 如果所有变量都为零.. 希望这会有所帮助..

Answer 2

你没有说你是想向上计数还是向下计数所以这里有一个解决方案，只需要你需要的部分代码：

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

（我这里用的是jQuery，你也应该用它，因为它很棒）

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: 
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 3

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 4

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>

简单的倒数计时器

Simple countdown timer

javascript

jquery

html

countdowntimer