在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>