jQueryでの３分タイマーの作成に関して

３分タイマーを作成しています。
タイマーの内容は以下の通りとなっております。

■ スタートを押すとタイマーが動き始める

■ ストップを押すとタイマーが停止する

■ リセットを押すと数字が03:00に戻る

■ ３分経過後にTime UP!と表示される

問題点

今の所エラーは発見されないのですが、スタートを押してもタイマーが02:59で動かなくなります。
おそらくsetIntervalが上手く連動していないのではないかと思うのですが
どのようにすれば解決すればよろしいでしょうか。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>timer</title>
    <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    <link rel ="stylesheet" href ="challenge_jquery.css">
    <script>
        $(function(){
            var time = 180;
            var setI;
            var min;
            var sec;
            
            $('#start').on("click", function startTimer() {
                time -= 1;
                min = Math.floor( time / 60 );
                sec = time % 60;
                min = ('00' + min).slice(-2);
                sec = ('00' + sec).slice(-2);
                $('#timer').html(min + ":" + sec);
                $('#start').prop('disabled',true);
                if (time === 0) {
                    $('#timer').html("Time&nbspUP!");
                    clearInterval(setI);
                } else {
                }
            });
            $('#stop').on("click",function stopTimer() {
                clearInterval(setI);
                $('#start').prop('disabled',false);
            });
            $('#reset').on("click",function resetTimer() {
                clearInterval(setI);
                $('#start').prop('disabled',false);
                $('#timer').html("03:00");
            });
            
            function startInterval() {
                setI = setInterval(startTimer,1000);
            }
        });
    </script>
</head>
<body>
    <div id = "box">
        <div id ="timer">03:00</div>
        <form>
            <input type ="button" id ="start" name ="start" value ="スタート">
            <input type ="button" id ="stop"  name ="stop" value ="ストップ" >
            <input type ="button" id ="reset" name ="reset" value ="リセット">
        </form>
    </div>
</body>
</html>

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

回答2件

ベストアンサー

せめてこんな感じ

javascript
1<script>
2$(function(){
3  var time = 180;
4  var setI;
5  var min;
6  var sec;
7  
8  function startTimer() {
9    time -= 1;
10    min = Math.floor( time / 60 );
11    sec = time % 60;
12    min = ('00' + min).slice(-2);
13    sec = ('00' + sec).slice(-2);
14    $('#timer').html(min + ":" + sec);
15    if (time === 0) {
16      $('#timer').html("Time&nbspUP!");
17      clearInterval(setI);
18    }
19  }
20  $('#start').on("click",function(){
21    $('#start').prop('disabled',true);
22    startInterval();
23  });
24  $('#stop').on("click",function stopTimer() {
25    clearInterval(setI);
26    $('#start').prop('disabled',false);
27  });
28  $('#reset').on("click",function resetTimer() {
29    clearInterval(setI);
30    time = 180;
31    $('#start').prop('disabled',false);
32    $('#timer').html("03:00");
33  });
34  
35  function startInterval() {
36    setI = setInterval(startTimer,1000);
37  }
38});
39</script>
40<div id = "box">
41<div id ="timer">03:00</div>
42<form>
43<input type ="button" id ="start" name ="start" value ="スタート">
44<input type ="button" id ="stop"  name ="stop" value ="ストップ" >
45<input type ="button" id ="reset" name ="reset" value ="リセット">
46</form>
47</div>
48