簡單的倒數計時器

Question

我想創建一個簡單的倒數計時器，我發現它只能在幾秒鍾內工作，我想增加小時：分鍾：秒...

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

對於計時器的每個部分，您可能具有不同的變量和不同的內部html，例如“ hh”的小時數，“ mm”的分鍾數和“ ss”的秒數..對於每個步驟，請將內部html設置為等於變量。

用某個數字初始化小時數，當其他數字為零時將其倒數1，同時使分鍾和秒等於59，並按照上面添加的代碼開始倒數秒數，然后分鍾數也一樣秒關系（當秒為零且分鍾不為零時，倒數分鍾加1）。 最后，如果所有變量均為零，則返回。希望這會有所幫助。

Answer 3

您沒有說要遞增計數還是遞減計數，因此這里提供了兩種解決方案，只需獲取所需代碼的一部分即可：

（提琴： 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: 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

如果您有秒數，請按照以下步驟獲取小時和分鍾

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

這是您在HH：MM：SS的完整時間

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

排序和甜蜜的方法