在 JavaScript 事件处理程序中控制第三方计时器实现

Question

我下载了一个倒数计时器组件"最后倒计时"，我正在尝试在我的网站上实现并通过按钮进行控制，但不确定如何使其适应我的网站以用作用户触发的 30 天倒计时时钟。

我创建了一个单击事件处理程序来检测按钮按下并验证了该处理程序是否已调用，但我不知道如何使计时器启动、暂停或停止。相反，单击该按钮始终会导致计时器继续倒计时。

任何想法我该如何进行？

配置计时器：

<div id="clock"></div>
<script type="text/javascript">
   $('#clock').countdown('2017/02/10', function(event) {
      var $this = $(this).html(event.strftime('' +
         '<span>%w</span> weeks ' +
         '<span>%d</span> days '  +
         '<span>%H</span> hr '    +
         '<span>%M</span> min '   +
         '<span>%S</span> sec'));
   });
</script>

单击事件处理程序：

<script>
    $(function() {
        var button = $('.start');
        button.click(function() {
            $(alert('It Worked') );
        });
    });
</script>

按钮声明：

<%= link_to 'Start My Whole 30!', '#', class: 'btn btn-success btn-lg start' %>

Answer 1

您可以尝试将coundown事件处理程序设置为true某些全局变量的条件，然后使用按钮切换该状态。

第 1 点

  window.countingDown = true
  $('#clock').countdown('2017/02/10', function(event) {
      if (window.countingDown) {
        // do stuff

第 2 点

  button.click(function() {
     window.countingDown = ! window.countingDown