jQuery.countdown à la fin de la minuterie démarrer une nouvelle minuterie avec le bouton

J'essaie de faire un compte à rebours basé sur la technique Pomodoro où vous travaillez pendant 25 minutes, puis faites une pause. J'écris la page en Javascript et jQuery en utilisant les plugins jQuery.countdown et moment.js. Je l'ai pour que quand un utilisateur frappe le bouton de démarrage, il compte 25 minutes, mais après que la minuterie est terminée, je veux qu'il y ait deux options de pause redémarrer la minuterie. Puis il va juste dans un cycle 25mins-> break-> 25 mins-> break-> etc en fonction du bouton que l'utilisateur pousse à la fin du compte à rebours.jQuery.countdown à la fin de la minuterie démarrer une nouvelle minuterie avec le bouton

Comment c'est maintenant les boutons après que le compte à rebours est terminé ne rien faire. Je me sens comme j'ai besoin de réinitialiser la minuterie, mais la documentation est un peu difficile à travers pour 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>

Source

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>

Source

2016-10-18 04:21:41

merci. Je vais maintenant devoir faire quelques recherches sur certaines fonctionnalités et css pour bien comprendre comment tout cela fonctionne. – kekethetabbycat

jQuery.countdown à la fin de la minuterie démarrer une nouvelle minuterie avec le bouton

Répondre

Questions connexes