簡單的倒數計時器

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」小時..和每一步設置內部htmls等於變量。

使用某個數字初始化小時數，並在其他數字爲零時使其倒數1，同時使分鐘和秒數等於59並開始按照上面添加的代碼計算秒數，然後執行相同的操作分鐘秒關係（秒數爲零且分鐘不是零倒計時分鐘）。最後如果所有的變量都爲零，則返回.. 希望這會有所幫助..

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); 

排序和甜蜜的方式