2013-07-16 60 views
3

我正在製作一個網頁,我必須做一個讀取div的日期(div從數據庫讀取日期)的倒計時。從div中讀取日期

當它接受字符串時,雖然它讀取着名的「1970年1月1日」,但它的行爲仍然沒有讀取我的輸入日期。

的JavaScript:

<script language="JavaScript"> 

     var gcor = new Date(); 
     var dscad = new Date(document.getElementById("caramello")); 
     var difftempo = (dscad - gcor)/1000; 
     var minuto = 60; 
     var ora = 60 * 60; 
     var giorno = 60 * 60 * 24; 
     var giorest = Math.floor(difftempo/giorno) 
     var orerest = Math.floor((difftempo - giorest * giorno)/ora) 
     var minrest = Math.floor((difftempo - giorest * giorno - orerest * ora)/minuto) 
     var secrest = Math.floor((difftempo - giorest * giorno - orerest * ora - minrest * minuto)) 

     ID = window.setTimeout("update();", 1000); 

     function update() { 
      gcor = new Date(); 
      difftempo = (dscad - gcor)/1000; 
      minuto = 60; 
      ora = 60 * 60; 
      giorno = 60 * 60 * 24; 
      giorest = Math.floor(difftempo/giorno) 
      orerest = Math.floor((difftempo - giorest * giorno)/ora) 
      minrest = Math.floor((difftempo - giorest * giorno - orerest * ora)/minuto) 
      secrest = Math.floor((difftempo - giorest * giorno - orerest * ora - minrest * minuto)) 

      document.getElementById("Label1").innerText = giorest; 
      if (giorest < 10) { 
       document.getElementById("Label2").innerText = "0" + orerest; 
      } 
      else { 
       document.getElementById("Label2").innerText = orerest; 
      } 
      if (minrest < 10) { 
       document.getElementById("Label3").innerText = "0" + minrest; 
      } 
      else { 
       document.getElementById("Label3").innerText = minrest; 
      } 
      if (secrest < 10) { 
       document.getElementById("Label4").innerText = "0" + secrest; 
      } 
      else { 
       document.getElementById("Label4").innerText = secrest; 
      } 
      ID = window.setTimeout("update();", 1000); 
     } 

,這是HTML/ASP是與它相連:

<body> 
<form runat="server"> 
<div> 
    <div id="caramello" onclick="prova();">18 july 2013</div><br /> 
    <br /> 
    <asp:Label ID="Label6" runat="server" Text="Label"></asp:Label> 
    <br /> 
    <asp:Label ID="Label1" runat="server" Text="00"></asp:Label>g 
    <asp:Label ID="Label2" runat="server" Text="00"></asp:Label>h 
    <asp:Label ID="Label3" runat="server" Text="00"></asp:Label>m 
    <asp:Label ID="Label4" runat="server" Text="00"></asp:Label>s 
</div> 
    </form> 

+0

使用'document.getElementById(「caramello」)。innerText' – nrodic

+0

@nrodic我使用「.innerHTML」,但我看到代碼沒有到達函數upgrade()... – ProtoTyPus

回答

2

嘗試像我的jsfiddle一個代碼示例: http://jsfiddle.net/YTAXM/

<div id="caramello">July 18 2013</div> 
<br /> 
<br /> 
<div ID="Label6"></div> 
<br /> 
<div ID="Label1">00</div>g 
<div ID="Label2">00</div>h 
<div ID="Label3">00</div>m 
<div ID="Label4">00</div>s 

var dscad = new Date(document.getElementById("caramello").innerHTML); 

function update() { 

    var gcor = new Date(); 
    difftempo = (dscad - gcor)/1000; 
    minuto = 60; 
    ora = 60 * 60; 
    giorno = 60 * 60 * 24; 
    giorest = Math.floor(difftempo/giorno) 
    orerest = Math.floor((difftempo - giorest * giorno)/ora) 
    minrest = Math.floor((difftempo - giorest * giorno - orerest * ora)/minuto) 
    secrest = Math.floor((difftempo - giorest * giorno - orerest * ora - minrest * minuto)) 

    document.getElementById("Label1").innerHTML = giorest; 

    document.getElementById("Label2").innerHTML = orerest; 

    document.getElementById("Label3").innerHTML = minrest; 

    document.getElementById("Label4").innerHTML = secrest; 
} 



setInterval(function() { 
    update(); 
}, 1000); 
+0

它的工作原理!!非常感謝。 – ProtoTyPus

+0

@DanieleNekoLuciani優秀!現在請[接受答案](http://meta.stackexchange.com/a/5235)。 – nrodic

+1

我會接受我的其他答案。我試圖儘可能接近OP的代碼,但Daniel的答案是更清潔和更好的練習。 – Dodecapus

2

爲什麼你想從DIV閱讀? 你可以寫一個簡單的方法來獲取倒計時的結束日期,並用setInterval觸發這個函數(在你的情況下顯然更好)。 這個函數只是把剩下的時間寫入你的div。 從ui閱讀 - 特別是在你的情況下,從一個像div這樣的靜態元素 - 是一個很好的習慣。 dom只能從代碼中寫出。

- 編輯:添加上的jsfiddle 我添加上的jsfiddle代碼例子來闡明我的回答 http://jsfiddle.net/FphCm/1/

// html 
<div id="Count"></div> 

// script 
var gcor = new Date(2013,12,31); // end date 

var update = function() { 
var temp = new Date(); 
temp.setTime(gcor.getTime() - temp.getTime()); 

var days = Math.floor(temp.getTime()/86400000); 
var hours = temp.getHours(); 
var minutes = temp.getMinutes(); 
var seconds = temp.getSeconds(); 

document.getElementById("Count").innerHTML = 
    (days > 0 ? days+"d " : "") + 
    (hours > 10 ? hours : "0"+hours) + ":" + 
    (minutes > 10 ? minutes : "0"+minutes) + ":" + 
    (seconds == 42 ? "<strong>" + seconds + "</strong>" : (seconds > 10 ? seconds : "0"+seconds)); 
}; 

var hUpdate = window.setInterval(update, 1000); 
+0

我明白了,你能舉個例子嗎?我不是真正的練習方法和同義詞^^「 – ProtoTyPus

+0

+1」dom只能從代碼中寫出來「雖然這不是一個答案。 – nrodic

+1

從dom讀取它不是一個好習慣 - 尤其是閱讀(並且從字符串中解析數據的效率很高) 請注意我的編輯方式:將update()函數的外部範圍內的var元素的句柄(從getElementById接收)保留在var中會更好一些。這也將擺脫在DOM上的句柄檢索,並可以用來確定該元素是否仍然可見,如果它不再附加的間隔可以放棄。 –