2016-12-03 61 views
-1

我刚开始使用js,我不知道它为什么不倒计时。有小费吗? (当我使用setInterval时,它也不起作用)。setTimeout不起作用

当EVENTDATE是任何一种通常日期像

var eventDate =new date (2016,12,25); 

它的工作原理。 控制台不显示任何错误。

 
 
     function countdown() { 
 
      var now = Date.parse(new Date); 
 
      var eventDate = new Date(now + 1800000); 
 
    
 
      var remTime = eventDate - now; 
 
    
 
      var s = Math.floor(remTime/1000); 
 
      var m = Math.floor(s/60); 
 
    
 
      m %= 60; 
 
      s %= 60; 
 
    
 
      m = (m < 10) ? "0" + m : m; 
 
      s = (s < 10) ? "0" + s : s; 
 
    
 
      document.getElementById("minutes").textContent = m; 
 
      document.getElementById("seconds").textContent = s; 
 
    
 
      setTimeout("countdown()", 1000); 
 
     } 
 
    
 
     countdown();
body { 
 
       background: #f6f6f6; 
 
      } 
 
    
 
      .countdownContainer { 
 
       position: absolute; 
 
       top: 50%; 
 
       left: 50%; 
 
       transform: translateX(-50%) translateY(-50%); 
 
       text-align: center; 
 
       background: #ddd; 
 
       border: 1px solid #ddd; 
 
       padding: 10px; 
 
       box-shadow: 0 0 5px 3px #ccc; 
 
      } 
 
    
 
      .info { 
 
       font-size: 80px; 
 
      }
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>Christmas Countdown</title> 
 
     
 
    </head> 
 
    <body> 
 
    <table class="countdownContainer"> 
 
     <tr class="info"> 
 
      <td colspan="4">Christmas Countdown</td> 
 
     </tr> 
 
     <tr class="info"> 
 
      <td id="minutes">12</td> 
 
      <td id="seconds">22</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Minutes</td> 
 
      <td>Seconds</td> 
 
     </tr> 
 
    </table> 
 
    </body> 
 
    </html>

+1

尝试'的setTimeout(倒计时,1000);'如果你想了解更多,然后看看这个http://www.w3schools.com/jsref/met_win_setinterval.asp – NewToJS

+2

这更干净,但没有任何区别。 – JJJ

+0

它也不会那样工作。感谢您的链接,但我已阅读过。 – Karolina

回答

0

有几件事情错在这里一个用代码和第二与功能的逻辑。

所有你需要传递函数中的setTimeout的第一次,因此它应该是setTimeout(countdown, 100);

其次在逻辑你计算

var now = Date.parse(new Date);

var eventDate = new Date(now + 1800000);

,然后计算的尊重两者都会为每个循环产生相同的值。

var eventDate = new Date(Date.parse(new Date) + 1800000); 
 

 
function countdown() { 
 
    var now = Date.parse(new Date); 
 

 

 
    var remTime = eventDate - now; 
 

 
    var s = Math.floor(remTime/1000); 
 
    var m = Math.floor(s/60); 
 

 
    m %= 60; 
 
    s %= 60; 
 

 
    m = (m < 10) ? "0" + m : m; 
 
    s = (s < 10) ? "0" + s : s; 
 

 
    document.getElementById("minutes").innerHTML = m; 
 
    document.getElementById("seconds").innerHTML = s; 
 

 
    setTimeout(countdown, 1000); 
 
} 
 

 
countdown();
body { 
 
    background: #f6f6f6; 
 
} 
 
.countdownContainer { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    text-align: center; 
 
    background: #ddd; 
 
    border: 1px solid #ddd; 
 
    padding: 10px; 
 
    box-shadow: 0 0 5px 3px #ccc; 
 
} 
 
.info { 
 
    font-size: 80px; 
 
}
<table class="countdownContainer"> 
 
    <tr class="info"> 
 
    <td colspan="4">Christmas Countdown</td> 
 
    </tr> 
 
    <tr class="info"> 
 
    <td id="minutes">12</td> 
 
    <td id="seconds">22</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Minutes</td> 
 
    <td>Seconds</td> 
 
    </tr> 
 
</table>

+0

当时间只设置为每秒更改时,为什么超时设置为100ms?该功能将运行10倍之前,它是由于变化... – NewToJS

+3

@ A.J没有A.J你赶紧获得第一个答案张贴。然后在添加详细信息后编辑答案。我已经看过很多次了。 – NewToJS

+0

它也行不通 – Karolina