jQuery 特定时间和日期的Javascript倒计时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18434166/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript countdown for specific time and date
提问by Alex Zahir
I am using a jQuery plugin to put the countdown timer in my webpage. Currently the code that controls what the timer displays is:
我正在使用 jQuery 插件将倒数计时器放在我的网页中。目前控制计时器显示内容的代码是：
<script type="text/javascript">
var clock = $('.clock').FlipClock(3600 * 24 * 3, {
clockFace: 'DailyCounter',
countdown: true
});
</script>
The JS for the plugin can be viewed here: https://github.com/objectivehtml/FlipClock/blob/master/js/flipclock/flipclock.js
插件的 JS 可以在这里查看：https: //github.com/objectivehtml/FlipClock/blob/master/js/flipclock/flipclock.js
The example page of the code in use can be seen here: http://flipclockjs.com/faces/daily-counter
正在使用的代码的示例页面可以在这里看到：http: //flipclockjs.com/faces/daily-counter
Currently the timer is a countdown for 3 days which resets everytime the page is refreshed. I want to use a custom time for the countdown timer which will be absolute(wont reset with page refresh). I want the date to be September 30, 2013 at 12:00pm PST (US West - California Time Zone).
目前，计时器是 3 天的倒计时，每次刷新页面时都会重置。我想为倒数计时器使用自定义时间，这将是绝对的（不会随着页面刷新而重置）。我希望日期为太平洋标准时间 2013 年 9 月 30 日下午 12:00（美国西部 - 加利福尼亚时区）。
Is there anyway to do this using Javascript or jQuery?
无论如何使用Javascript或jQuery来做到这一点？
回答by adeneo
Get the current time, and note that this will be the time set on the users computer clock, whatever that is set to, and set a certain date, then calculate the difference and use that for the plugin:
获取当前时间，并注意这将是用户计算机时钟上设置的时间，无论设置为什么，并设置某个日期，然后计算差异并将其用于插件：
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
});
For accurate times I would reccoment using your webserver to output the current time.
对于准确的时间，我建议使用您的网络服务器输出当前时间。
回答by Ahmed Fathy
I'd do it that way:
我会这样做：
<script type="text/javascript">
var clock = $('.clock').FlipClock(new Date(2013,8,30).getTime()/1000 - new Date().getTime()/1000, {
clockFace: 'DailyCounter',
countdown: true
});
</script>
This counts down till the date Sept, 30 2013... I didn't try it yet so I'm not sure it's working.
这倒计时到 2013 年 9 月 30 日...我还没有尝试过，所以我不确定它是否有效。
Edit: Corrected the date to be new Date(2013,8,30) instead of new Date(2013,9,30) as the month counting starts from 0 not 1.
编辑：将日期更正为 new Date(2013,8,30) 而不是 new Date(2013,9,30)，因为月份计数从 0 开始，而不是 1。
回答by Hymanson
I'm asssuming the first arg of .FlipClip() is the amount of time until the countdown completes. This time, "t", should be the difference between now and the target time.
我假设 .FlipClip() 的第一个参数是倒计时完成之前的时间量。这个时间，“t”，应该是现在和目标时间之间的差异。
var t = targetTimeInMs - currentTimeInMs;
To get the current time, use the no-arg Date constructor.
要获取当前时间，请使用无参数 Date 构造函数。
var currentTimeInMs = new Date().getTime();
To get the target time, supply Date with arguments. Here are a few examples from MDN:
要获取目标时间，请为 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
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
I'm not exactly sure if you need to supply milliseconds as the first arg to your .FlipClip() function. Consult the documentation/source for that. Then use the appropriate method of the Date object to get the required unit (seconds? minutes? hours? and use date.getSeconds(), getHours(), etc, see MDN.)
我不确定您是否需要提供毫秒作为 .FlipClip() 函数的第一个参数。请查阅文档/来源。然后使用 Date 对象的适当方法来获取所需的单位（秒？分钟？小时？并使用 date.getSeconds()、getHours() 等，参见 MDN。）
