0

ポモドーロ テクニックに基づいて、25 分間作業してから休憩するカウントダウン タイマーを作成しようとしています。jQuery.countdown および moment.js プラグインを使用して、Javascript および jQuery でページを作成しています。ユーザーがスタートボタンを押すと25分カウントダウンするようにしていますが、そのタイマーが終了した後、2つの休憩オプションがあり、タイマーを再起動する必要があります。次に、カウントダウンの最後にユーザーが押すボタンに応じて、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>
4

2 に答える 2

0 
<!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-18T04:21:41.863 に答える