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

问题描述 投票:0回答:1

我目前正在使用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>

有什么想法吗?

javascript jquery flipclock
1个回答
0
投票

这里是您的有效代码段。我猜问题出在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>
© www.soinside.com 2019 - 2024. All rights reserved.