倒计时计时器和进度条的jQuery问题答案

【问题标题】：jquery issue with countdown timer and progress bar倒计时计时器和进度条的jQuery问题
【发布时间】：2014-12-10 15:30:27
【问题描述】：

我正在尝试使用 jquery 插件https://github.com/eAdnan007/jquery-countdown 下面是我的 html 和 JS。我已经尝试了多种设置，并且对 JQuery 相当陌生，我没有任何运气。我知道我的设置是错误的，但似乎无法弄清楚它们到底应该是什么。

HTML

<div class="progressWrap">
    <div class="fullbar"></div>
    <div class="progress deal1" style="width:0%"></div>
</div>
<div class="timer deal1"></div>

$('.timer.deal1').countdown({
end_time: "2014/12/10 16:06:28",
progress        : 1,
update_progress: (20,$('.progress.deal1')),
onComplete: function() {
            $('.timer').replaceWith("<div class=\"timer ended\">Deal Over</div>");
    }    
});

我知道我需要同时拥有 progress: 和 update_progress 但对我来说 git 中的方向还很不清楚。以下是上述链接 git 的说明：

进展

应该显示进度条的 dom 元素。如果您不想显示，则为 False。

更新进度

用于处理 preogress bar 进度的函数。它接收两个参数，进度百分比 (0-100) 和包含进度条的 dom 元素。

感谢任何帮助，因为我现在迷路了并且知道我的设置完全错误。谢谢！

更新

这是一个添加了一些 css 的 JSFiddle，因此您可以看到发生了什么：http://jsfiddle.net/L7n5hc43/1/

我已将小提琴链接到 git 中提到的 External JS。我在控制台中遇到了一些错误，但我对 JQuery 的了解还不够，无法真正解决问题。

【问题讨论】：

这个小提琴有用吗jsfiddle.net/AghR3/178
@Dave 不幸的是没有。我需要一个显示天数、小时数、分钟数、秒数和进度条的计数器。

标签： jquery function parameters progress-bar countdown

【解决方案1】：

好的，感谢 eAdnan007（插件的所有者），感谢任何正在寻找的人，这是一个 JSFiddle，它显示了更新后的代码http://jsfiddle.net/L7n5hc43/4/

这是更新后的 JQuery：

$('.timer.deal1').countdown({    
    end_time: '2014/12/19 17:00:00', //Time Progress bar is at 100% and timer runs out
    start_time: '2014/12/14 08:00:00', //Time when the progress bar is at 0%
    progress: $('.progress.deal1'), //There dom element which should display the progressbar.
    onComplete: function() {
            $('.timer.deal1').replaceWith("<div class=\"timer ended\">Deal Over</div>");
    }    
});

我需要为进度条为 100% 的时间添加 start_time，您可以使用日期和时间来使进度条在您的实际开始时间上或多或少。如果进度有延迟或进展但不是在结束日期，我会使用它来增加或减少进度。

此外，“update_progress”不仅需要“progress”函数来识别正确的 DOM 元素。

感谢大家的光临并提供帮助！

【讨论】：