特定时间和日期的 Javascript 倒计时答案

【问题标题】：Javascript countdown for specific time and date特定时间和日期的 Javascript 倒计时
【发布时间】：2013-08-25 21:58:12
【问题描述】：

我正在使用 jQuery 插件将倒数计时器放在我的网页中。目前控制计时器显示内容的代码是：

<script type="text/javascript">
    var clock = $('.clock').FlipClock(3600 * 24 * 3, {
        clockFace: 'DailyCounter',
        countdown: true
    });
</script>

插件的JS可以在这里查看：https://github.com/objectivehtml/FlipClock/blob/master/js/flipclock/flipclock.js

使用代码的示例页面可以在这里看到： http://flipclockjs.com/faces/daily-counter

目前计时器是 3 天的倒计时，每次刷新页面时都会重置。我想为倒数计时器使用自定义时间，这将是绝对的（不会随着页面刷新而重置）。我希望日期为太平洋标准时间 2013 年 9 月 30 日下午 12:00（美国西部 - 加利福尼亚时区）。

有没有办法使用 Javascript 或 jQuery 来做到这一点？

【问题讨论】：

你有写php代码的权限吗？
不.. 仅限javascript

标签： javascript jquery flipclock

【解决方案1】：

获取当前时间，并注意这将是用户计算机时钟上设置的时间，无论设置为什么，并设置某个日期，然后计算差异并将其用于插件：

var date  = new Date(Date.UTC(2013, 8, 30, 12, 0, 0));
var now   = new Date();
var diff  = date.getTime()/1000 - now.getTime()/1000;

var clock = $('.clock').FlipClock(diff, {
    clockFace: 'DailyCounter',
    countdown: true
});

为了获得准确的时间，我建议使用您的网络服务器来输出当前时间。

【讨论】：

那 typeError 是怎么说的？
我可能应该注意到您链接的插件名为 FlipClock 而不是 FlipClip ?
是的，它是flipclock，而不是flipclip，但不幸的是，正如domainandseo.com/26/index.html...所见，这也不起作用。正常版本是domainandseo.com/26/index1.html
@AlexZahir - 但是在那个页面上没有 .clock 元素，它被称为 .countdown ？
@AlexZahir - 没问题！

【解决方案2】：

我会这样做：

<script type="text/javascript">
    var clock = $('.clock').FlipClock(new Date(2013,8,30).getTime()/1000 - new Date().getTime()/1000, {
        clockFace: 'DailyCounter',
        countdown: true
    });
</script>

这倒计时到 2013 年 9 月 30 日...我还没有尝试过，所以我不确定它是否有效。

编辑：将日期更正为 new Date(2013,8,30) 而不是 new Date(2013,9,30)，因为月份计数从 0 而不是 1 开始。

【讨论】：

这很好，但这实际上是说“还剩 64 天”，但直到 9 月 30 日，应该是“还剩 35 天”。所以我在想应该是哪里出了问题？
是的，你是对的。它应该是新的日期（2013,8,30）。把你想要的月份 - 1 作为月份的计数从 0 开始，而不是 1。这可能是因为它计算了与月份为 1 月的某个日期的差异，所以如果你想代表 1 月，你必须使用 0。代表 9 月，您必须使用 8。我现在已将答案编辑为正确的答案。
哦，是的，非常感谢。我给你的答案加了一个，但另一个答案得到了选定的答案，因为它还按照问题的要求将默认时区设置为 UTC。再次感谢:)

【解决方案3】：

我假设 .FlipClip() 的第一个参数是倒计时完成之前的时间量。这一次，“t”，应该是现在和目标时间之间的差。

var t = targetTimeInMs - currentTimeInMs;

要获取当前时间，请使用无参数 Date 构造函数。

var currentTimeInMs = new Date().getTime();

要获取目标时间，请提供带参数的日期。以下是来自 MDN 的一些示例：

var today = new Date();
var birthday = new Date("December 17, 1995 03:24:00");
var birthday = new Date(1995,11,17);
var birthday = new Date(1995,11,17,3,24,0);

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

我不确定您是否需要将毫秒作为第一个参数提供给 .FlipClip() 函数。请参阅文档/来源。然后使用 Date 对象的适当方法获取所需的单位（秒？分钟？小时？并使用 date.getSeconds()、getHours() 等，参见 MDN。）

【讨论】：