Question

我问了类似的问题，但没有收到。因此，我会重述一下。为什么每次时钟面改变时，flipClock函数getTime（）都不返回值？当我将其输出到控制台时，该值始终保持为10。从不倒数。时钟工作正常。如何获取时钟的当前时间？

var clock;

  // Instantiate a counter
  clock = new FlipClock($('.clock'), 10, {
    clockFace: 'MinuteCounter',
    autoStart: false,
    countdown: true
  });

if(clock.getTime() == 0){
   //Redirect to another page
   window.location.href = "example.html";
}else{
 console.log("This is the time now" + getTime());
}

Answer 1

如果我误解了你的问题，请原谅我。如果这个答案不合时宜，我就表示歉意。

您提供的代码仅执行一次。创建时钟后，立即调用clock.getTime()。那个时刻的结果将是10。因此，您的重定向代码将不会执行（结果不等于0），您将立即陷入else块中的代码。该代码会将时钟的当前时间注销到控制台（由于代码执行得如此之快，因此仍为10）。

为了观察时钟递减计数，您将需要重复调用clock.getTime()。您应该阅读有关轮询的概念。您可能会发现setInterval有用（请参阅https://alligator.io/js/settimeout-setinterval/）。

Answer 2

因为您一次调用它，所以它需要绑定到interval事件。在回调函数中创建

var clock = new FlipClock($('.clock'), 10, {
  clockFace: 'MinuteCounter',
  autoStart: true,
  countdown: true,
  callbacks: {
    interval: function() {
      var time = this.factory.getTime().time;
      console.clear()
      console.log("Countdown now: " + time);
      if (time == 0) {
        alert('Countdown finished!');
      }
    }
  }
});

.clock{margin-top:30px}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>


<div class="clock"></div>

FlipClock .getTime（）不起作用？不更新返回值

2 个答案: