从特定日期开始的 Jquery CountUP 计时器答案

【问题标题】：Jquery CountUP timer from specific date从特定日期开始的 Jquery CountUP 计时器
【发布时间】：2014-10-11 04:32:43
【问题描述】：

我需要特定日期的 countUP 计时器。（年、月、日、时、分、秒、）

例如，我需要从 2012 年 8 月 24 日开始计时，当我刷新页面时，计时器必须仍然工作/计时。

我发现了很多计数器，但每个计数器都是 DOWN，而不是 UP。

这个计时器看起来不错 http://flipclockjs.com/

但缺少从特定日期开始的计数。

【问题讨论】：

标签： jquery date timer web counter

【解决方案1】：

好吧，既然你提到了 FlipClock，我想这应该可以工作：

计算当前日期和您想要的日期之间的差异：

var date1 = new Date("8/24/2012");
var date2 = new Date();
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffSeconds = Math.ceil(timeDiff / 1000);

创建 FlipClock（默认情况下会向上计数，以更改设置的倒计时：true）：

var clock = $('.your-clock').FlipClock({
    // ... your options here
});

使用setTime()方法设置时间：

clock.setTime(diffSeconds);

现在开始计时：

clock.start();

我没有检查这个，但应该根据文档工作。

编辑：

由于 FlipClock 不支持超过 99 天的任何内容，因此这里是 Countdown.js 的另一种方法：

setInterval(function() {
    var timespan = countdown(new Date("08/24/2012"), new Date());
    var div = document.getElementById('time');
    div.innerHTML = "Time difference with 08/24/2012 is " + timespan.years + " years, " + timespan.months + " months, " + timespan.days + " days, " + timespan.hours + " hours, " + timespan.minutes + " minutes, " + timespan.seconds + " seconds."
}, 1000);

见demo。

【讨论】：

太棒了！但是 Flipclock 只有 DailyCounter，没有月份和年份。此计时器仅计数到 99 天。我需要更改此代码 var clock = $('.clock').FlipClock({ clockFace: 'DailyCounter', });但是翻转时钟不提供我需要的选项
好吧，您需要创建自己的面孔 (flipclockjs.com/api)，或者选择另一个支持年份的计数器并执行我描述的相同步骤（计算日期差异）。
好的，我改变了我的要求。如果我只想以静态数字显示 timeDiff，而不是实时取景 countUP，该怎么办？我来到页面，我看到距离我设置的日期有多长时间，不是向上计数，只有静态数字。然后，当我重新加载页面时，脚本再次计算差异并将其显示在页面上。
您可以使用 countdown.js：var timespan = countdown(new Date("08/12/2012"), new Date());，或使用纯 javascript：stackoverflow.com/a/20669357/2571926
太棒了！惊人的！惊人的！非常感谢你！这就是我需要的！ :)