【jQuery】jQueryでカウントダウンタイマーを作成せよ。具体的な要件は以下に示す。

12211 ワード
jQuery jQuery テキストリンク

１・カウントは03:00からスタートする
２・スタートボタンを押すと1秒ずつカウントが進む
３・カウントが00:00になったら「Time UP!」と表示する
４・ストップボタンを押すとカウントが止まる
５・リセットボタンを押すとカウントが03:00に戻り、カウントが止まる
６・スタートを二度押しても1秒ずつカウントが進むこと。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jqueryでカウントダウンタイマー</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script>
//001----------jqueryの開始------------------------------------------------------
$(function(){

//002-----------↓何分のタイマーにするか入力------------------------------------------
  var minutes = 0.1;
//003---------------------------------------------------------------------------
  var dafa_time = (minutes * 60);
  var time = dafa_time;
  var interval;
  var min;
  var sec;

  calc();

  $('#start').on("click",function(){
    $('#start').prop('disabled',true);
    interval = setInterval(startTimer,1000);
  });

  $('#stop').on("click",function stopTimer() {
    clearInterval(interval);
    $('#start').prop('disabled',false);
  });

  $('#reset').on("click",function() {
    clearInterval(interval);
    $('#start').prop('disabled',false);
    $('#timer').html("TIME UP!!").css("color","black");
    resetTimer();
  });


  function startTimer() {
    time --;
    if (time === 0 ) {
      $('#timer').html("TIME UP!!").css("color","red");
      clearInterval(interval);
    } else {
      calc();
    }

  }


  function resetTimer() {
    time = dafa_time;
    calc();
  }


  function calc() {
    min = Math.floor( time / 60 );
    sec = time % 60;
    min = ('00' + min).slice(-2);
    sec = ('00' + sec).slice(-2);
    $('#timer').html(min + ":" + sec);
   }

});



</script>
<!-----タイマーを表示--------------------------------------------->
<div id ="timer"></div>
<!-------------------------------------------------------------->
<!-----スタートボタンを表示----------------------------------------->
<button id="start">スタート</button>
<!-----ストップボタンを表示----------------------------------------->
<button id="stop">ストップ</button>
<!-----リセットボタンを表示----------------------------------------->
<button id="reset">リセット</button>
<!-------------------------------------------------------------->