jQuery.countdown on timer finish 用按钮启动一个新的定时器答案

【问题标题】：jQuery.countdown on timer finish start a new timer with buttonjQuery.countdown on timer finish 用按钮启动一个新的定时器
【发布时间】：2017-02-27 04:07:41
【问题描述】：

我正在尝试根据番茄工作法制作一个倒数计时器，你工作 25 分钟然后休息一下。我正在使用 jQuery.countdown 和 moment.js 插件在 Javascript 和 jQuery 中编写页面。我有它，所以当用户点击开始按钮时，它会倒计时 25 分钟，但是在计时器完成后，我希望有两个中断选项再次重新启动计时器。然后它只是循环 25 分钟->休息->25 分钟->休息->等等，具体取决于用户在倒计时结束时按下的按钮。

现在倒计时完成后的按钮什么也不做。我觉得我需要重置计时器，但是 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>

【问题讨论】：

标签： javascript jquery momentjs jquery-countdown

【解决方案1】：

<!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>

【讨论】：

谢谢。我现在需要对一些功能和 css 进行一些研究，以完全了解所有这些是如何工作的。

【解决方案2】：

对 html 标签使用 id="checkout-countdown"

对于 jquery：

<script src="~/Assets/global/plugins/countdown/jquery.countdown.js"></script>

<script>
    $(function () {            
            startCountDown();           
    });

    function startCountDown() {
        var currentDateTime=new Date($.now());
        var austDay = new Date(currentDateTime);
        austDay.setSeconds(austDay.getSeconds() + @expirationSecondsRemaining);

        $('#checkout-countdown').removeClass('is-countdown').html('');

        $('#checkout-countdown').countdown({
            until: austDay, compact: true,
            description: '', onExpiry: liftOff, 'format': 'MS', alwaysExpire: true
        });
    }

    function liftOff() {
        var result = new Object();
        result.message = "Your session has expired. We've released your selected price. Please try selecting price again.";
        result.type = "info";
        app.showConfirmation(result);

        //recursively call start count down
        startCountDown();
    }
</script>

【讨论】：