javascript - 各种日期的动态倒计时时钟 - 纯 Javascript

Question

如果我错误地提出了这个问题，或者之前已经有人问过并回答过这个问题，我提前表示歉意。我的搜索发现了类似的基于 JQuery 和/或静态日期的问答，我正在寻找具有动态日期的纯 JavaScript 解决方案。

jsfiddle

JSFiddle

fiddle 显示从当前日期到某个日期的倒计时，输出显示到达日期之前剩余的天数和小时数，然后一旦超过“golivedate”，它也会显示这一点。

这部分是我正在寻找的，但是由于将出现多次(100+)并且具有不同的倒计时日期，因此它需要是动态的，而在当前状态下它不是动态的。我相信更改为 .getElementsByClassName 可能是一种解决方案，使我能够多次出现某个类名，而不是仅限于 .getElementById 的一个实例，但我不确定如何进行切换。我也不确定如何添加多个“golivedates”。

次要的一点是，当设置关键日期标记时，在日期旁边输出一些文本，例如还剩 1d 23 小时“明天上线!”距离“今日上线”还剩 23 小时。一旦超过日期，“立即直播!”显示消息而不是任何倒计时。这可以通过 var before="Text"var current="Text"来实现，但我的专业知识(非常!)有限，所以我不确定这是否完全正确或如何实现。

总而言之，我请求帮助:

• 将 .getElementById 切换为 .getElementsByClassName
• “golivedate”是动态的，而不是单次出现
• 显示剩余 X 时间的相关文本，然后在到达日期时用文本替换倒计时时钟。

我发布了，我在这里写了很多，所以感谢您花时间阅读它 - 如果我无论如何都不清楚，请告诉我，我会尽力进一步解释可以!

Answer 1

编辑:

您可以使用以下格式的跨度:

<span class="golivedate" data-countdown="Aug 25, 2015"></span>

当然，每个跨度可以保存不同的日期，有些也可以具有相同的日期。您将获得该类的所有元素:

var glds = document.querySelectorAll('.golivedate');

对于每个元素，您可以获得其数据属性的值(即日期):

var dt = glds[i].getAttribute('data-countdown');

检查日期是否是过去的，如果是，则给它一个不同的文本并删除该类:

if(seconds_left <= 0) {
    glds[i].innerHTML = "Hurray!"
    glds[i].className = ""
}

总的来说，它是:

var days, hours, minutes, seconds;

setInterval(function () {
    var glds = document.querySelectorAll('span.golivedate');
    var current_date = new Date().getTime();

    for (var i = 0; i < glds.length; i++) {
        var dt = glds[i].getAttribute('data-countdown');
        var seconds_left = (new Date(dt).getTime() - current_date) / 1000;
        if(seconds_left <= 0) {
            glds[i].innerHTML = "Hurray!"
            glds[i].className = ""
        }
        else {
            days = parseInt(seconds_left / 86400);
            seconds_left = seconds_left % 86400;
            hours = parseInt(seconds_left / 3600);
            seconds_left = seconds_left % 3600;
            minutes = parseInt(seconds_left / 60);
            seconds = parseInt(seconds_left % 60);

            glds[i].innerHTML = days + "d, " + hours + "h" + ", " + seconds;
        }
    }

}, 1000);

jsfiddle DEMO