javascript カウントダウンタイマー3分

1カウントは03:00からスタートする
2スタートボタンを押すと1秒ずつカウントが進む
3カウントが00:00になったら「Time UP!」と表示する
4ストップボタンを押すとカウントが止まる
5リセットボタンを押すとカウントが03:00に戻り、カウントが止まる
↑↑を実行したいのですが実行されません。
どうしたら良いでしょうか??``````
ここに言語を入力

コード
```<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>カウント</title>
        <link rel="stylesheet" href="timer.css">
    </head>
    <body>
        <div id="timer">3:00</div>
        <button id="start">スタート</button>
        <button id="stop">ストップ</button>
        <button id="reset">リセット</button>
         <script>
            var timerid = 0;
            var count = 0;
            var start = document.getElementById('start');
            var stop = document.getElementById('stop');
            var reset = document.getElementById('reset');
            var timer = document.getElementById('timer');
            function start_down() {
                count--;
                if (count == 0) {
                    clearInterval(timerid);
                }
                display();
            }
            function display() {
                if (count > 0) {
                    var min = Math.floor(count / 60);
                    var sec = count % 60;
                    timer.innerHTML = ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2);
                } else {
                    timer.innerHTML = 'Timeup';
                }
            }
             function start_on(){
                timerid = setInterval(countdown, 1000);
            }
            function stop_on() {
                clearInterval(timerid);
            }
            function reset_on() {
                count = 180;
                display();
            }
            window.onload = function() {
                start.addEventListener('click',start_on,false);
                stop.addEventListener('click',stop_on,false);
                reset.addEventListener('click',reset_on,false);
            }
        </script>
    </body>
</html>

m.ts10806

2020/05/11 08:55

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

yambejp

2020/05/11 08:55

> スタートボタンを押すと1秒ずつカウントが進むは、スタートボタンおした瞬間2:59になるのか、 1秒間は3:00となっていて、1秒後に2:59になるのか？どっちでしょう

chidayo

2020/05/11 09:51

申し訳ありません。 3:00となっていて、1秒後に2:59になる方です。

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

回答2件

ベストアンサー

こんにちは、以下のコードでどうでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8" />
5        <title>カウント</title>
6        <link rel="stylesheet" href="timer.css" />
7    </head>
8    <body>
9        <div id="timer">3:00</div>
10        <button id="start">スタート</button>
11        <button id="stop">ストップ</button>
12        <button id="reset">リセット</button>
13        <script>
14            var timerid = 0;
15            var count = 180;
16            var start = document.getElementById("start");
17            var stop = document.getElementById("stop");
18            var reset = document.getElementById("reset");
19            var timer = document.getElementById("timer");
20            function start_down() {
21                count--;
22                if (count <= 0) {
23                    clearInterval(timerid);
24                }
25                display();
26            }
27            function display() {
28                if (count > 0) {
29                    var min = Math.floor(count / 60);
30                    var sec = count % 60;
31                    timer.innerHTML = ("0" + min).slice(-2) + ":" + ("0" + sec).slice(-2);
32                } else {
33                    timer.innerHTML = "Timeup";
34                }
35            }
36            function start_on() {
37                start_down();
38                timerid = setInterval(start_down, 1000);
39            }
40            function stop_on() {
41                clearInterval(timerid);
42            }
43            function reset_on() {
44                stop_on();
45                count = 180;
46                display();
47            }
48            window.onload = function () {
49                start.addEventListener("click", start_on, false);
50                stop.addEventListener("click", stop_on, false);
51                reset.addEventListener("click", reset_on, false);
52            };
53        </script>
54    </body>
55</html>
56