Question

我下载了一个倒数计时器组件The Final Countdown，我正在尝试在我的网站上实施并通过按钮进行控制，但不确定如何使其适应我的网站以用作用户触发的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

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

1 个答案: