Question

我正在尝试根据番茄工作法制作一个倒数计时器，你工作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>

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

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

计时器上的jQuery.countdown使用按钮

2 个答案: