从 div 读取日期答案

【问题标题】：Reading the Date from div从 div 读取日期
【发布时间】：2013-07-15 05:11:34
【问题描述】：

我正在制作一个网页，我必须做一个从 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>

【问题讨论】：

使用document.getElementById("caramello").innerText
@nrodic 我使用“.innerHTML”，但我看到代码没有到达函数 upgrade()...

标签： c# javascript asp.net html countdown

【解决方案1】：

你为什么要从 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);

【讨论】：

我明白了，你能给我举个例子吗？我并没有真正练习方法和similia ^^"
+1 表示“dom 只能从代码中写入”，尽管这不是答案。
从 dom 中读取并不是一个好习惯——尤其是读取（并且从字符串中解析数据的性能非常低下）。请注意我的编辑：最好将 dom 元素的句柄（从 getElementById 接收）保留在 update() 函数外部范围的 var 中。这也将摆脱 dom 上的句柄检索，并可用于确定元素在 dom 上是否仍然可见。如果不再附加，则可以放弃间隔。
@Daniel，也将您小提琴中的 html 粘贴到帖子中。
@Dodecapus 我在脚本之前添加了 html

【解决方案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);

【讨论】：

@DanieleNekoLuciani 太好了！现在请accept the answer.
我会接受我的另一个答案。我试图尽可能地贴近 OP 的代码，但 Daniel 的回答更简洁、更好。