jQuery.countdown在計時器完成啓動一個新的計時器與按鈕

我想做一個基於番茄鍾技術倒計時計時器25分鐘，然後休息一下。我正在使用jQuery.countdown和moment.js插件在Javascript和jQuery中編寫頁面。我有這樣，當用戶點擊啓動按鈕它計算下降了25分鐘，但此後會定時完成我想那裏有兩個破發選項重新啓動定時器。然後，它只是在一個週期25mins-> BREAK-> 25 mins-> BREAK->等取決於什麼按鈕，用戶按下在倒計時結束。jQuery.countdown在計時器完成啓動一個新的計時器與按鈕

現在倒數完成後的按鈕現在是什麼都不做。我覺得我需要重置計時器，但jQuery.countdown文檔有點難以通過。

<div class="container-fluid"> 
<p>start timer and then get to work</p> 
<div class="container-fluid"> 
    <div class="container-fluid"> 
     <span id="timer"></span> 
    </div> 
    </br> 
    <div class="containter-fluid" id="timer-buttons"> 
     <span><button type="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span> 
    </div> 
</div> 



<script type="text/javascript"> 

    var $timer = $('#timer'); 
    var $timerButtons = $('#timer-buttons'); 

    $('#btn-start-timer').click(function(event) { 
    // get the current time when button clicked 
    var currentTime = moment(); 
    // add 25 minutes for interval 
    var timerInterval = moment(currentTime).add(25.0, 'm'); 
    // format interval 
    var timerIntervalFormatted = moment(timerInterval).format('YYYY/MM/DD HH:mm:ss'); 

    // start the 25 minute timer and at the end popup two buttons for breaks 
    $timer.countdown(timerIntervalFormatted, function(event) { 
     $(this).html(event.strftime('%M:%S')); 
    }).on('finish.countdown', function() { 
     $timerButtons.html('<span><button type="button" class="btn btn-secondary btn-sm" id="btn-short-break">short break</button></span> <span><button type="button" class="btn btn-secondary btn-sm" id="btn-long-break">long break</button></span>'); 
    }); 
    }); 

    $('#btn-short-break').click(function(event) { 
    var currentTime = moment(); 
    var shortBreak = moment(currentTime).add(1.0, 'm'); 
    var shortBreakFormatted = moment(shortBreak).format('YYYY/MM/DD HH:mm:ss'); 

    $timer.countdown(shortBreakFormatted, function(event) { 
     $(this).html(event.strftime('%-M:%S')); 
    }).on('finish.countdown', function() { 
     $timerButtons.html('<span><button type ="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>'); 

    }); 
    }); 

    $('#btn-long-break').click(function(event) { 
    var currentTime = moment(); 
    var longBreak = moment(currentTime).add(2.0, 'm'); 
    var longBreakFormatted = moment(longBreak).format('YYYY/MM/DD HH:mm:ss'); 

    $timer.countdown(longBreakFormatted, function(event) { 
     $(this).html(event.strftime('%-M:%S')); 
    }).on('finish.countdown', function() { 
     $timerButtons.html('<span><button type ="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span>'); 

    }); 
    }); 

</script>

來源

2016-10-18 kekethetabbycat

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>countdown</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.plugin.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script> 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-countdown/2.0.2/jquery.countdown.css" /> 
    <style type="text/css"> 
     #timer-buttons #btn-short-break, #timer-buttons #btn-long-break, #timer-buttons.break #btn-start-timer 
     { 
      display: none; 
     } 
     #timer-buttons.break #btn-short-break, #timer-buttons.break #btn-long-break 
     { 
      display: inline; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
      var $timer = $('#timer'); 
      var $timerButtons = $('#timer-buttons'); 

      $('#btn-start-timer').click(function (event) { 
       // get the current time when button clicked 
       var currentTime = moment(); 
       // add 25 minutes for interval 
       var timerInterval = moment(currentTime).add(25, 's'); 
       // format interval 
       var timerIntervalFormatted = moment(timerInterval).format('YYYY/MM/DD HH:mm:ss'); 

       // start the 25 minute timer and at the end popup two buttons for breaks 
       $timer.removeClass('is-countdown').html('').countdown({ 
        until: timerInterval._d, 
        onExpiry: function() { 
         $timerButtons.toggleClass('break'); 
        } 
       }); 
      }); 
      $('#btn-short-break').click(function (event) { 
       var currentTime = moment(); 
       var shortBreak = moment(currentTime).add(1, 's'); 
       var shortBreakFormatted = moment(shortBreak).format('YYYY/MM/DD HH:mm:ss'); 

       $timer.removeClass('is-countdown').html('').countdown({ 
        until: shortBreak._d, 
        onExpiry: function() { 
         $timerButtons.toggleClass('break'); 
        } 
       }); 
      }); 
      $('#btn-long-break').click(function (event) { 
       var currentTime = moment(); 
       var longBreak = moment(currentTime).add(2, 's'); 
       var longBreakFormatted = moment(longBreak).format('YYYY/MM/DD HH:mm:ss'); 

       $timer.removeClass('is-countdown').html('').countdown({ 
        until: longBreak._d, 
        onExpiry: function() { 
         $timerButtons.toggleClass('break'); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="container-fluid"> 
     <p>start timer and then get to work</p> 
     <div class="container-fluid"> 
      <div class="container-fluid"> 
       <div id="timer"></div> 
      </div> 
      <br /> 
      <div class="containter-fluid" id="timer-buttons"> 
       <span><button type="button" class="btn btn-secondary btn-sm" id="btn-start-timer">start timer</button></span> 
       <span><button type="button" class="btn btn-secondary btn-sm" id="btn-short-break">short break</button></span> 
       <span><button type="button" class="btn btn-secondary btn-sm" id="btn-long-break">long break</button></span> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

來源

2016-10-18 04:21:41

謝謝。我現在需要對一些功能和CSS進行一些研究，以充分理解所有這些如何工作。 – kekethetabbycat

jQuery.countdown在計時器完成啓動一個新的計時器與按鈕

回答

相關問題