Question

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

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

第一个代码计算事件的天数。我想要完成的是，在事件发生后，计数器开始向上计数。也就是说，苹果公司于3月23日23日推出iphone，倒数计时器显示还剩1天，但是，在23日3月之后，倒计时时间开始向上计数，比如自推出以来的1天等等

Answer 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>

现有倒数计时器

1 个答案: