javascript - 倒计时达到 00 时重新加载页面 :00

Question

我正在尝试组合 2 个 jQuery 函数，如下所示:

HTML

<span id="clock" data-countdown="2020/05/16 10:08:00"></span>

JavaScript

第一个^st脚本正在从data-countdown属性中的时间倒计时到00:00:

var date = $('#clock').data('countdown');

$('#clock').countdown(date, function (event) {
    $(this).html(event.strftime('%M:%S'));
});

第二个^nd脚本应该在时间到达00:00时重新加载页面:

var text = document.getElementById('clock').innerHTML;

if (text == '00:00') {
   setTimeout(function() {
       window.location.reload()
   }, 1000);
}

我试图将这两个功能结合起来，但是当时间到达 00:00 时页面不会刷新。这是CodePen .

var date = $('#clock').data('countdown');

$('#clock').countdown(date, function (event) {
    $(this).html(event.strftime('%M:%S'));

    var text = document.getElementById('clock').innerHTML;

    if (text == '00:00') {
        setTimeout(function(){
            window.location.reload()
        }, 1000);
    }
});

Answer 1

这是因为您正在检查事件处理程序外部的文本。 text=='00:00' 的当前条件检查只会在脚本加载时执行一次。

这是有效的 JavaScript 函数

var date = $('#clock').data('countdown');
$('#clock').countdown(date, function (event) {
  $(this).html(event.strftime('%M:%S'));

  if(document.getElementById('clock').innerHTML === "00:00") {
    window.location.reload();
  }
});