jQueryを使用したtimer

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
javasriptのjqueryを使ってコードをかき直したいのですが分かりません…
ご教示お願いいたします

発生している問題・エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="timer.css"> <title>Timer</title> </head> <body> <div id="timer"> <p id="display">03:00</p> </div> <input type="button" id="start" value="START"> <input type="button" id="stop" value="STOP"> <input type="button" id="reset" value="RESET">

<script>
    var interval_id;
    var start_click = false;
    var time = 180;//カウントダウンの数字を格納する変数
    var min = 0;//残り時間「分」を格納する変数
    var sec = 0;//残り時間「秒」を格納する変数

    function count_start() { //カウント開始
        if (start_click === false) {
            interval_id = setInterval(count_down, 1000);//1000ミリ秒毎関数を呼び出す
            start_click = true;
        }
    }

    function count_stop() { //停止
        clearInterval(interval_id);
        start_click = false;

    }

    function count_down() { //カウントダウン関数
        var display = document.getElementById("display");
        console.log(time);
        if (time === 1) {
            display.innerHTML = "TIME UP!"; //時間切れ
        }
        else {
            time--;
            min = Math.floor(time / 60);
            sen = Math.floor(time % 60);
            display.innerHTML = "0" + min + ":" + sen;
            if (sen < 10) {
                display.innerHTML = "0" + min + ":" + "0" + sen; //0min:0sen
            }
        }
    }

    function count_reset() {
        time = 180;
        min = 0;
        sen = 0;
        var reset = document.getElementById("display");
        reset.innerHTML = "03:00";
    }

    window.onload = function() {
        var start = document.getElementById("start");
        start.addEventListener("click", count_start, false);//イベントを付与exマウス動かすと...
        var stop = document.getElementById("stop");
        stop.addEventListener("click", count_stop, false);
        var reset = document.getElementById("reset");
        reset.addEventListener("click", count_reset, false);
    }
</script>

</body>

試したこと

補足情報（FW/ツールのバージョンなど）

m.ts10806

2021/03/28 12:24

>javasriptのjqueryを使ってコードをかき直したいのですが分かりません… JavaScript jQuery ですが、現状のコードで起きている問題は何でしょうか。書き直し途中であったとしても「こういう機能で、ここまではできている、ここができてない」と範囲を明確にしてください。あと、コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

行動規範の内容に同意します

回答1件

まるっとそのまま移植すればこんな感じ

javascript
1$(function(){
2  var interval_id;
3  var start_click = false;
4  var time = 180;
5  var min = 0;
6  var sec = 0;
7  $("#start").on("click",function(){
8    if (start_click === false) {
9      interval_id = setInterval(function(){
10        console.log(time);
11        if (time === 1) {
12          $('#display').html("TIME UP!"); 
13        }else {
14          time--;
15          min = Math.floor(time / 60);
16          sen = Math.floor(time % 60);
17          $('#display').html("0" + min + ":" + sen);
18          if (sen < 10) {
19            $('#display').html("0" + min + ":" + "0" + sen); 
20          }
21        }
22      }, 1000);
23      start_click = true;
24    }
25  });
26  $("#stop").on("click", function(){
27    clearInterval(interval_id);
28    start_click = false;
29  });
30  $("#reset").on("click", function(){
31    time = 180;
32    min = 0;
33    sen = 0;
34    $("#display").html("03:00");
35  });
36});
37