flipclock.js 倒计时停止后修改页面文本

Question

我目前正在使用 flipclock.js 作为倒数计时器。我想在倒计时停止后修改网页的文本。我正在使用 onStop 参数来尝试执行此操作，但似乎无法使任何行正常工作。

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet">
</head>
<script>
  var clock = $('.clock').FlipClock(2, {
    countdown: true,
    minimumDigits: 2,
    onStop: function() {
      alert("Test!");
      $('.message').html('The clock has stopped!');
      $('.message').text('The clock has stopped!')
    }
  });
</script>

<div class="clock"></div>

有什么想法吗？

Answer 1

这是适合您的工作代码段。我猜问题出在 FlipClock 文档中

<html>
  <head>
    <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.css">
  </head>
    <body>
      <div class="clock"></div>
      <div class="message"></div>
    
      <script>
        var clock = $('.clock').FlipClock(2, {
          countdown: true,
          minimumDigits: 2,
            callbacks: {
            stop:function() {
              $('.message').html('The clock has stopped!');
            }
          }
        });
      </script> 
    </body>
</html>

flipclock.js 倒计时停止后修改页面文本

Modify page text after flipclock.js countdown timer stops

javascript

jquery

flipclock