Question

如果我错误地构思了这个问题，或者之前已经被问到并回答了我的道歉。我的搜索出现了类似Q＆amp; A的基于JQuery和/或静态日期，我正在寻找一个带有动态日期的纯JavaScript解决方案。

{{1}}

JSFiddle

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

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

次要的重要性还包括在设置关键日期标记的日期旁边有一些文本输出，例如剩余1天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

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

1 个答案: