-2

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

$("#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...
}  });

第一个代码计算事件的天数。我想要完成的是，事件发生后，计数器开始向上计数。即，Apple 于 16 年 3 月 23 日推出 iphone，倒计时显示还剩 1 天，然而，在 3 月 23 日之后，倒计时时间开始向上计数，如自发布以来的 1 天，依此类推

4

1 回答 1

0

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

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

<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>
于 2016-03-22T02:45:44.470 回答