Question

我正在为我的邻居创建一个有圣诞灯光秀的网站。

该节目每年12月6日至1月1日每晚两次：下午6:30和晚上8点。

我们想在网站上添加一个倒计时：

下一个节目：00：00：00（hh：mm：ss）

但我该怎么办呢。当我在网上搜索它时，每个人都说我必须使用API进行倒计时。

但是他们只使用一个日期倒计时，所以我想我必须自己用JavaScript写一个。

任何人都可以帮忙吗？

我想我必须使用许多if / else语句，首先是“是第1个月，第12个月还是别的什么？”，然后是“它还有18.30吗？” （我想要24小时）和“它已经是20.00”等等。

但是有更好的方法，因为这对我来说似乎有很多工作。

Answer 1

JavaScript有一个内置的日期对象，可以减少日期和时间的处理：

MDN documentation for JavaScript's date object

如果你没有为它的构造函数提供参数，它会给你当前日期（根据最终用户的计算机）：

var now = new Date();

您可以通过提供年，月（从1月零指数），日，以及可选的小时，分钟和秒来将其设置为特定日期：

var now = new Date();
var first_show = new Date(now.getFullYear(), 11, 6, 18, 30);

您可以对这些日期对象使用大于和小于比较来检查日期是在另一个日期之前还是之前：

var now = new Date();
var first_show = new Date(now.getFullYear(), 11, 6, 18, 30);
alert(now < first_show);// Alerts true (at date of writing)

所以，你可以：

为当前日期创建日期对象，并在今年（以及明年1月1日的展示）中显示每个节目
按时间顺序循环播放节目日期，
使用大于当前日期的第一个作为倒计时的基础。

注意：您应该使用服务器端的东西来设置now准确的参数，而不是仅依靠new Date()，因为如果最终用户的计算机设置的时间错误，那么我会给出错误的结果。

Answer 2

这是一个从now()开始倒数4小时的例子：

<script type="text/javascript">
var limit = new Date(), element, interval;
limit.setHours(limit.getHours() + 4);
window.onload = function() {
    element = document.getElementById("countdown");
    interval = setInterval(function() {
        var now = new Date();
        if (now.getTime() >= limit.getTime()) {
            clearInterval(interval);
            return;
        }
        var diff = limit.getTime() - now.getTime();
        var hours = parseInt(diff / (60 * 60 * 1000));
        diff = diff % (60 * 60 * 1000);
        minutes = parseInt(diff / (60 * 1000));
        diff = diff % (60 * 1000);
        seconds = parseInt(diff / 1000);
        if (hours < 10) {
            hours = "0" + hours;
        }
        if (minutes < 10) {
            minutes = "0" + minutes;
        }
        if (seconds < 10) {
            seconds = "0" + seconds;
        }
        miliseconds = diff % 1000;
        miliseconds = miliseconds.toString().substring(0, 2);
        element.innerHTML = hours + ":" + minutes + ":" + seconds + ":" + miliseconds;
    }, 10);
}

直播here

倒数到多个时刻，怎么样？

2 个答案: