0

您好我正在尝试将几个 javascript 倒计时添加到单个 html 页面。我在下面包含了 .js 文件。现在我的页面只显示第一个倒计时。

function cdtd () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd()',1000);

}

function countdown () {
    var end = new Date("May 31, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('countdown()',1000);

}

function cdtd3 () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd3()',1000);

}

function cdtd4 () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd4()',1000);

}

function cdtd5 () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd5()',1000);

}

function cdtd6 () {
    var end = new Date("December 25, 2013 00:01:00");
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
        clearTimeout (timer);
        document.write("Deal Ended");
    }
    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %=60;

    document.getElementById("daysBox").innerHTML = days;
    document.getElementById("hoursBox").innerHTML = hours;
    document.getElementById("minsBox").innerHTML = minutes;
    document.getElementById("secsBox").innerHTML = seconds;

    var timer = setTimeout('cdtd6()',1000);

}
4

3 回答 3

1

您需要在这里解决几个问题：

  1. 每个倒数计时器在存储时间字符串时都使用相同的元素 ID。这就是为什么只有其中一个出现的原因。

  2. 如果您的任何倒计时达到零，则document.write()调用将擦除整个页面。

  3. 代码一遍又一遍地重复。这应该是您所有倒计时的一项常用功能。（如果您需要再添加一个怎么办？再添加十个？）

  4. 虽然多个计时器可以工作，但您不需要它们。运行一个计时器并从中更新所有显示的时间。

  5. 调用setInterval()时，最好将函数引用作为第一个参数而不是字符串传递。

给这些想法一些想法，看看你能想出什么，然后用你的新代码报告。:-)

于 2013-05-23T17:14:09.870 回答
0

@Shanimal 我在我的网站上使用了此代码，问题是当计时器达到 0000 时，它会转到另一个页面并显示交易结束。我想要的是，当计时器达到 0000 时，它应该必须在特定 div 的同一页面上显示消息。它不应该转到另一个页面。我已经尝试通过删除 if (timeDiff <= 0) { clearTimeout (timer); document.write("交易结束"); }

即使达到 0000 它也不会显示任何消息 它从 -1 - 1 -1 -1 重新开始计数

于 2014-03-06T15:05:55.977 回答
0

现在，每次调用该函数时，您都会引用一个框来覆盖每个值。

您想使用查询选择器而不是 getElementById。

这是一个使用 jQuery 的简单示例：

var cdtd = function(id,end) {
    var start = new Date();
    var timeDiff = end.getTime() - start.getTime();
    if (timeDiff <= 0) {
            clearTimeout (timer);
            document.write("Deal Ended");
    }

    var seconds = Math.floor(timeDiff / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);
    hours %= 24;
    minutes %= 60;
    seconds %= 60;
    $( id + " .days").html(days);
    $( id + " .hours").html(hours);
    $( id + " .minutes").html( minutes);
    $( id + " .seconds").html( seconds );
    console.log(id + " .hoursBox",$( id + " .hoursBox").length,id,end,hours,minutes,seconds)
    var timer = setTimeout(function(){cdtd(id,end)},1000);
}
cdtd("#counter1",new Date("December 25, 2014 00:01:00"));
cdtd("#counter2",new Date("October 31, 2014 00:01:00"));
cdtd("#counter3",new Date("January 1, 2014 00:01:00"));

http://plnkr.co/8LrtWvfGnZWyRYl2RlWd

于 2013-05-23T17:14:08.130 回答