2016-12-03 62 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