在JavaScript事件處理程序中控制第三方定時器實現

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> 

Click事件處理程序：

<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爲條件，然後使用該按鈕切換該狀態。

pt。 1

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

pt。 2

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