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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/23a52cca-23ac-4e6c-e985-0f2f8ab06696.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954863/b785cc14-d0da-6860-f502-539730f17afc.png)



```javascript
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>カウントダウンタイマー</title>
    <script>
//001----------javascriptの開始--------------------------------------------------
    window.onload = function(){
//002----------スタートボタンをクリックして発火--------------------------------------
            var start = document.getElementById('start');
            start.addEventListener('click',count_start, false);
//003----------ストップボタンをクリックして発火--------------------------------------
            var stop = document.getElementById("stop");
            stop.addEventListener("click",count_stop, false);
//004----------リセットボタンをクリックして発火--------------------------------------
            var reset = document.getElementById("reset");
            reset.addEventListener("click",count_reset,false);
        }     
//-----------------------------------------------------------------------------
//変数の定義---------------------------------------------------------------------
    var count   = 180;     //カウントダウンの数字を格納する変数  3分なので180
    var min     = 0;       //残り時間「分」を格納する変数
    var sec     = 0;       //残り時間「秒」を格納する変数
    var start_f = false; 
    var interval;
//-----------------------------------------------------------------------------

//004----------スタート開始------------------------------------------------------
function count_start(){
//0041------------二度押しを防止する
        if (start_f === false) {
//0042------------1秒毎にcont_down関数を呼び出す
          interval = setInterval(count_down,1000);
          start_f = true;
        }
    }
//-----------------------------------------------------------------------------

//005------------カウントダウンの開始---------------------------------------------
    function count_down(){
//006--------------------------------------------------------------------------
        if(count === 1){
            var display = document.getElementById("default");
            display.style.color = 'red';
            display.innerHTML = "TIME UP!";
            clearInterval(interval);
//007-------------------------------------------------------------------------
        } else {
//008-------------------------------------------------------------------------
            count--;
//009----------Math.floor関数を使って小数点になった分を整数に変換する。---------------
            min = Math.floor(count / 60);
//010------------60秒で割ったあまりが秒となる-------------------------------------
            sec = count % 60;
            var count_down = document.getElementById("default");
            count_down.innerHTML = ("0"+min) +"：" + ("0"+sec).slice(-2);
        }
    }
    
//006-----------ストップボタンの押下---------------------------------------
    function count_stop(){
        clearInterval(interval);
        start_f = false;
    }

//007-----------リセットボタンの押下---------------------------------------
    function count_reset(){
       clearInterval(interval);
        count = 180;
        start_f = false;
        var count_down = document.getElementById("default");
        count_down.style.color = 'black';
        count_down.innerHTML = "03：00";
    }    
    </script>

</head>
<body>
<!-----タイマーの3分を表示------------------------------------------>
            <p id="default">03：00</p>
<!-----スタートボタンを表示----------------------------------------->
            <button id="start">スタート</button>
<!-----ストップボタンを表示----------------------------------------->
            <button id="stop">ストップ</button>
<!-----リセットボタンを表示----------------------------------------->
            <button id="reset">リセット</button>
</body>
</html>
```