More than 5 years have passed since last update.

[むだ][HTML][JS] 時間経過を表示させるいい感じのなかったから作った

Posted at 2019-09-07

なにを?

これ。

(Gifだからちょっと速くなっている。)

なんで?

研修用に経過時間表示してくれるのがほしかった。

ごちゃごちゃ広告出てほしくない
アラーム不要
ミリ秒邪魔
わざわざ大きく表示しなきゃいけないのメンドウ
イベントや雰囲気, 会場に応じて色変えれたら便利

・・・、30分探して良いのなかった。
けど、よく考えたら、この程度だったら作れるのでは?

10分で作れた。

といっても、 Code for Funさんから、サンプルぱくってきて、いじっただけ。
(コメントをきれいに残してくださっているので、すぐ書き換えできた。)

.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>経過時間表示くん</title>
    <style>
        body {
            background-color: #004666;
        }
        .container {
            /*margin-top: 100px;*/
            text-align: center;
        }
        #timerLabel {
            color: white;
            font-size: 20em;
            line-height: 0.1em;
        }
        .myButton {
            width: 180px;
            height: 50px;
            border: none;
            border-radius: 6px;
            background-color: white;
            font-size: 16px;
        }
        .title, .myButton {
            color: midnightblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <p id="timerLabel">00:00</p>

        <input type="button" class="myButton" onclick="start()" value="START" id="startBtn">
        <input type="button" class="myButton" onclick="stop()" value="STOP">
        <input type="button" class="myButton" onclick="reset()" value="RESET">
    </div>
    <script>
        var status = 0; // 0:停止中 1:動作中
        var time = 0;
        var startBtn = document.getElementById("startBtn");
        var timerLabel = document.getElementById('timerLabel');

        // STARTボタン
        function start(){
            // 動作中にする
            status = 1;
            // スタートボタンを押せないようにする
            startBtn.disabled = true;

            timer();
        }

        // STOPボタン
        function stop(){
            // 停止中にする
            status = 0;
            // スタートボタンを押せるようにする
            startBtn.disabled = false;
        }

        // RESETボタン
        function reset(){
            // 停止中にする
            status = 0;
            // タイムを0に戻す
            time = 0;
            // タイマーラベルをリセット
            timerLabel.innerHTML = '00:00';
            // スタートボタンを押せるようにする
            startBtn.disabled = false;
        }

        function timer(){
            // ステータスが動作中の場合のみ実行
            if (status == 1) {
                setTimeout(function() {
                    time++;

                    // 分・秒・ミリ秒を計算
                    var min = Math.floor(time/100/60);
                    var sec = Math.floor(time/100);
                    var mSec = time % 100;

                    if (min < 10) min = "0" + min;
                    if (sec >= 60) sec = sec % 60;
                    if (sec < 10) sec = "0" + sec;

                    // タイマーラベルを更新
                    timerLabel.innerHTML = min + ":" + sec ;

                    // 再びtimer()を呼び出す
                    timer();
                }, 10);
            }
        }

        document.onkeydown = function(event) {
            if (event) {
                if (event.keyCode == 32 || event.which == 32) {
                    if(status == 1) {
                        stop();
                    } else if (status == 0) {
                        start();
                    }
                }
            }
        };
    </script>
</body>

参考

【動画・サンプルコード付き】JavaScriptでつくる簡単ストップウォッチ
- 最終的なサンプルコードだけ使ってごめんなさい。w

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up