2013-08-03 72 views
0

我正在嘗試製作一個從1小時開始一直向下的JavaScript倒計時時鐘。 我在這個過程中只使用了一點jQuery。基於JavaScript的倒計時時鐘問題

$(document).ready(function(){ 

var h,m,s,output; 
$("#StartW").click(function(){ 
function startWork() 
{ 
    h = 1; 
    m = 0; 
    s = 0; 
    output = h + ":" + m + ":" + s; 
    setInterval(function() {count()}, 1000); 
} 

function count() 
{ 
    if(s == 0) 
    { 
     if(m == 0) 
     { 
      if(h == 0); 
      { 
       output = "time's up"; 
      } 
      h = 0; 
      m = 59; 
      s = 59; 
     } 
    m = m - 1; 
    s = 59; 
    } 
s = s - 1; 
output = h + ":" + m + ":" + s; 
document.getElementById("WTM").innerHTML = output; 
} 
}); 
}); 

1- StartW是調用函數的按鈕的ID。 2 WMT是顯示時鐘的跨度的編號。

當我點擊按鈕,我沒有得到任何結果。什麼都沒發生。我的導航器中的JavaScript控制檯根本沒有顯示任何錯誤。

+1

在我看來,你只是定義你的功能,但你不能要求他們。例如,'startWork'永遠不會被調用。我也可以建議你在'click'處理程序之外定義你的函數嗎? – plalx

+0

示例:http://jsfiddle.net/ZG3wx/您還應該閱讀:http://goo.gl/NhxY90一個簡單的javascript倒計時函數。 – Anil

+0

感謝借給我一隻手的傢伙:d – SaucyGuy

回答

1

在你的點擊事件函數中,你聲明瞭兩個函數,但是從來不會調用它們,所以什麼都不會發生。試試這個:

$(document).ready(function(){ 

    var h,m,s,output; 
    $("#StartW").click(function(){ 
     function startWork() 
     { 
      h = 1; 
      m = 0; 
      s = 0; 
      output = h + ":" + m + ":" + s; 
      setInterval(function() {count()}, 1000); 
     } 

     function count() 
     { 
      if(s == 0) 
      { 
       if(m == 0) 
       { 
        if(h == 0) 
        { 
         output = "time's up"; 
        } 
        h = 0; 
        m = 59; 
        s = 59; 
       } 
       m = m - 1; 
       s = 59; 
      } 
      s = s - 1; 
      output = h + ":" + m + ":" + s; 
      document.getElementById("WTM").innerHTML = output; 
     } 
     startWork(); 
    }); 
}); 

固定用凹槽使得它超清晰,也有上應刪除

作爲一個說明你的方法來計算一個小時線if(h == 0);一個;,你要明白,它可能不是很準確。你要求代碼等待1000毫秒,自己增加1秒,就像我們計算秒數說「mississipi」幫助我們等待下一秒一樣。儘管JavaScript在1秒內計數1000毫秒更精確,因爲我們要在一秒鐘內說出mississipi,但由於X和Y原因,它可能會關閉。知道已經過去多久的唯一真正準確的方法是觀看時鐘,然後再看一遍,直到它顯示我們等了一個小時。所以,在JS中,保存它開始的時間,每秒鐘左右通過當前時間和開始時間的差別顯示剩餘時間並顯示定時器。

+0

你也可以告知這是一個不好的做法,確定其職能的事件處理程序內... – plalx

+0

的OP但是你已經做了兩次,可能並不總是一個壞主意IMO – Salketer

+0

謝謝,我真的想過,你說的是真的。我正在考慮使用從UTC獲取其值的日期對象,以便我可以確保時間更準確:) – SaucyGuy

1

事實上,在按下該按鈕,你不調用任何功能,你只需啓動它們。從點擊事件得到外界的功能countstartWork,和做的東西一樣

$('#StartW').on('click', startWork);

檢查它here

+0

感謝您的幫助:D – SaucyGuy