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

Javascript countdown for specific time and date

本文关键字：Javascript 倒计时 日期 定时间      更新时间：2023-09-26

我正在使用一个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来实现这一点？

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

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

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

我会这样做：

<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日…我还没有尝试过，所以我不确定它是否有效。

编辑：将日期更正为新日期（2013,8,30），而不是新日期（13,9,30）。因为月份计数从0开始，而不是从1开始。

我正在计算FlipClip（）的第一个参数是到倒计时完成为止的时间。这个时间"t"应该是现在和目标时间之间的差值。

var t = targetTimeInMs - currentTimeInMs;

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

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

若要获取目标时间，请为Date提供参数。以下是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

我不确定是否需要将毫秒作为.FlicClip（）函数的第一个参数。请查阅文档/资料来源。然后使用Date对象的适当方法来获得所需的单位（秒？分钟？小时？，并使用Date.getSeconds（）、getHours（）等，请参阅MDN。）

相关文章：