1

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

该节目每年从 12 月 6 日到 1 月 1 日每晚举行两次：下午 6 点 30 分和晚上 8 点。

我们想在网站上添加一个倒计时，上面写着：

下一场演出：00:00:00 (hh:mm:ss)

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

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

任何人都可以帮忙吗？

我想我必须使用许多if/else语句，以“是第 1 个月、第 12 个月还是其他什么？”开头，然后是“已经 18.30 了吗？” （我想要 24 小时）和“已经是 20.00”等等。

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

4

2 回答 2

3

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

如果您不为其构造函数提供任何参数，它将为您提供当前日期（根据最终用户的计算机）：

var now = new Date();

您可以通过提供年、月（从一月开始为零索引）、日以及可选的小时、分钟和秒来将其设置为特定日期：

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 月 1 日节目）
  2. 按时间顺序循环播放演出日期，以及
  3. 使用大于当前日期的第一个日期作为倒计时的基础。

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

于 2013-07-11T11:19:02.247 回答
0

这是一个开始倒计时 4 小时的示例now()：

<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);
}

在这里看到它

于 2013-07-11T11:42:49.723 回答