jquery - jQuery.countdown 完成后显示隐藏内容

Question

我正在使用jQuery.countdown插件在页面上显示倒计时。

倒计时完成后，我想隐藏倒计时并显示隐藏的 div。

我已经设法做到了，但前提是您在倒计时运行时在浏览器上显示该页面。如果我在过去后尝试访问该页面event.strftime，我看到的只是 0 天/小时/分钟/秒的静态倒计时，并且我试图获得与查看页面时相同的结果（隐藏倒计时并显示隐藏的 div)

这是我正在使用的代码：

$("span#limit").countdown("2019-09-12 16:00:00", function(event) {
  $(this).text(event.strftime('%D days %H:%M:%S'));
}).on('finish.countdown', function() {
  $(this).hide(200);
  $('.div').show(800);

});

.div {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script>
<span id="limit"></span>
<div class="div">
  Hidden content
</div>

谢谢！

标签： jquery

Answer 1

利用event.elapsed

function finish() {
  $('span#limit').hide(200);
  $('.div').show(800);
}

$("span#limit").countdown("2019-09-12 17:27:00", function(event) {
  $(this).text(event.strftime('%D days %H:%M:%S'));
  event.elapsed && finish();
}).on('finish.countdown', finish)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js" integrity="sha256-Ikk5myJowmDQaYVCUD0Wr+vIDkN8hGI58SGWdE671A8=" crossorigin="anonymous"></script>

<span id="limit"></span>
<div class="div">
  Hidden content
</div>