现有倒数计时器中的 JS 计数计时器

我有以下代码，我想转换此代码，以便它在事件日期后开始向上计数。我可以请求帮助吗？

$("#countdown").countdown("2016/02/22", function(event) {
var $this = $(this).html(event.strftime(''
 + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col">   <span class="countdown-time"> %-D </span> Days </div></div> '
 + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %H </span> Hours </div></div>'
 + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %M </span> Minutes </div></div>'
 + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %S </span> Seconds </div></div>'));});

我的书说使用下面这样的东西，但我无法完成结果:(

$('div#clock').countdown(finalDate, {elapse: true})
.on('update.countdown', function(event) {
if (event.elapsed) { // Either true or false
  // Counting up...
} else {
  // Countdown...
}  });

第一个代码对事件进行天数计算。我想完成的是，在事件结束后，计数器开始向上计数。即，苹果在 23 月 16 日推出 iphone，倒数计时器显示还剩 1 天，但是，在 3 月 23 日之后，倒计时时间开始向上计数，例如自发布以来的 1 天，依此类推

好的，

这是一个工作示例。我在这里找到了一个工作示例：jQuery Countdown Count-Up Example，然后对其进行修改以适合您的代码。两者都包含在下面的代码中，因此您可以看到它们是如何工作的。请注意：我无法让它在已经过去的日期下工作。我认为倒计时必须实际过去才能计数。例如，我认为您无法给它十年前的日期并使其自动同步;我认为它需要从倒计时开始，然后降到零，然后才能开始计数（至少，我无法让它工作，也许你可以）。

此外，如果您在下载倒计时时遇到问题：您需要依次安装倒计时，然后相应地更改下面的 src 文件。您的 bower 组件文件夹可能与我的:)不在同一个位置

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="../bower_components/jquery.countdown/dist/jquery.countdown.js"></script>
</head>
<body>
  <!-- Example from the site will go here: -->
  <div id="clock" style="height: 150px; width: 150px; background-color: blue"></div>
  <!-- Your example will go here: -->
  <div id="countdown" style="height: 150px; width: 150px; background-color: red"></div>
  <script type="text/javascript">
    // The example from the site:
    var fiveSeconds = new Date().getTime() + 5000;
    $('#clock').countdown(fiveSeconds, {elapse: true})
      .on('update.countdown', function(event) {
        var $this = $(this);
        if (event.elapsed) {
          $this.html(event.strftime('After end: <span>%H:%M:%S</span>'));
        } else {
          $this.html(event.strftime('To end: <span>%H:%M:%S</span>'));
        }
     });
    // Your example:
    $("#countdown").countdown("2016/12/22", function(event) {
        if (event.elapsed) {
          $(this).html(event.strftime(''
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %-D </span> Days </div></div> '
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %H </span> Hours </div></div>'
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %M </span> Minutes </div></div>'
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %S </span> Seconds </div></div>'));
        } else {
          $(this).html(event.strftime(''
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %-D </span> Days </div></div> '
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %H </span> Hours </div></div>'
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %M </span> Minutes </div></div>'
     + '<div class="countdown-col-wrapper col-xs-3"><div class="countdown-col"><span class="countdown-time"> %S </span> Seconds </div></div>'));
      }});
  </script>
</body>
</html>

相关内容

最新更新

热门标签：