Help us understand the problem. What is going on with this article?

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

なにを?

これ。

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

なんで?

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

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

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

10分で作れた。

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

<!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>

参考

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away