在HTML中的JS倒計時

Question

對於一個網站，我需要倒數到一個特定的日期。我試圖用JavaScript自己編寫這樣的代碼，但是我失敗了。所以我搜索了一個模板。我發現了一個堆棧溢出，它的工作非常好。但我有一個問題。我需要分別格式化日，時，分和秒。在我發現的代碼中，所有東西都是由Javascript寫入到一個div中的。所以我想讓Javascript單獨編輯所有4個div（天，小時，分鐘，秒）。有人能幫助我嗎？

<script> 
    var end = new Date('07/16/2017 00:00 AM'); 

     var _second = 1000; 
     var _minute = _second * 60; 
     var _hour = _minute * 60; 
     var _day = _hour * 24; 
     var timer; 

     function showRemaining() { 
      var now = new Date(); 
      var distance = end - now; 
      if (distance < 0) { 

       clearInterval(timer); 
       document.getElementById('countdown').innerHTML = 'EXPIRED!'; 

       return; 
      } 
      var days = Math.floor(distance/_day); 
      var hours = Math.floor((distance % _day)/_hour); 
      var minutes = Math.floor((distance % _hour)/_minute); 
      var seconds = Math.floor((distance % _minute)/_second); 

      document.getElementById('countdown').innerHTML = days + 'days '; 
      document.getElementById('countdown').innerHTML += hours + 'hrs '; 
      document.getElementById('countdown').innerHTML += minutes + 'mins '; 
      document.getElementById('countdown').innerHTML += seconds + 'secs'; 
     } 

     timer = setInterval(showRemaining, 1000); 
    </script> 
    <div id="countdown"> 

     <div id="days"></div> 
     <div id="hrs"></div> 
     <div id="mins"></div> 
     <div id="secs"></div> 

    </div> 

Answer 1

希望能幫助！

鏈接運行在線：https://jsbin.com/sivejolapi/edit?html,output

<script> 
    var end = new Date('07/16/2017 00:00 AM'); 

    var _second = 1000; 
    var _minute = _second * 60; 
    var _hour = _minute * 60; 
    var _day = _hour * 24; 
    var timer; 

    function showRemaining() { 
     var now = new Date(); 
     var distance = end - now; 
     if (distance < 0) { 

      clearInterval(timer); 
      document.getElementById('countdown').innerHTML = 'EXPIRED!'; 

      return; 
     } 
     var days = Math.floor(distance/_day); 
     var hours = Math.floor((distance % _day)/_hour); 
     var minutes = Math.floor((distance % _hour)/_minute); 
     var seconds = Math.floor((distance % _minute)/_second); 

     document.getElementById('days').innerHTML = days + 'days '; 
     document.getElementById('hrs').innerHTML = hours + 'hrs '; 
     document.getElementById('mins').innerHTML = minutes + 'mins '; 
     document.getElementById('secs').innerHTML = seconds + 'secs'; 
    } 

    timer = setInterval(showRemaining, 1000); 
</script> 
<div class="countdown"> 

    <div id="days"></div> 
    <div id="hrs"></div> 
    <div id="mins"></div> 
    <div id="secs"></div> 

</div> 

`

Answer 2

所有你必須改變的是：

document.getElementById('countdown').innerHTML = days + 'days '; 
document.getElementById('countdown').innerHTML += hours + 'hrs '; 
document.getElementById('countdown').innerHTML += minutes + 'mins '; 
document.getElementById('countdown').innerHTML += seconds + 'secs'; 

給這個正確 DIV ID而不是countdown所有和改變.innerHTML +=到.innerHTML =

<script> 
 
    var end = new Date('07/16/2017 00:00 AM'); 
 

 
     var _second = 1000; 
 
     var _minute = _second * 60; 
 
     var _hour = _minute * 60; 
 
     var _day = _hour * 24; 
 
     var timer; 
 

 
     function showRemaining() { 
 
      var now = new Date(); 
 
      var distance = end - now; 
 
      if (distance < 0) { 
 

 
       clearInterval(timer); 
 
       document.getElementById('countdown').innerHTML = 'EXPIRED!'; 
 

 
       return; 
 
      } 
 
      var days = Math.floor(distance/_day); 
 
      var hours = Math.floor((distance % _day)/_hour); 
 
      var minutes = Math.floor((distance % _hour)/_minute); 
 
      var seconds = Math.floor((distance % _minute)/_second); 
 

 
      document.getElementById('days').innerHTML = days + 'days '; 
 
      document.getElementById('hrs').innerHTML = hours + 'hrs '; 
 
      document.getElementById('mins').innerHTML = minutes + 'mins '; 
 
      document.getElementById('secs').innerHTML = seconds + 'secs'; 
 
     } 
 

 
     timer = setInterval(showRemaining, 1000); 
 
    </script> 
 
    <div id="countdown"> 
 

 
     <div id="days"></div> 
 
     <div id="hrs"></div> 
 
     <div id="mins"></div> 
 
     <div id="secs"></div> 
 

 
    </div>