JavaScriptで作るモダンなストップウォッチ

JavaScriptで作るモダンなストップウォッチのソースコードの紹介です。

絹田真也

JavaScriptで作るモダンなストップウォッチのソースコードの紹介です。

できるもの

ソースコード

<html>
    <head>
        <title>時刻管理アプリ</title>

  <meta name=”description” content=”秒単位の時刻とストップウォッチを組み合わせたモダンな時刻管理アプリです。正確な時間を知りたい時に便利です。仕事や学習のサポートに最適です。”>
  <style media="screen">
        body {
        background: #202020;
        background-image: linear-gradient(#e66465, #9198e5);
        color: white;
    }
    button {
        width: 100px;
        height: 30px;
        border: 3px soldi white;
        border-radius: 50px;
        background: #202020;
        color: white;
        cursor: pointer;
        outline: none;
    }

    #time {
      position: absolute;
      top: 30%;
      left: 50%;
      transform: translate(-50%, -55%);
    }
    #myStopwatch {
        font-size: 101px;
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -55%);
    }
    #buttons {
        position: absolute;
        top: 55%;
        left: 48.4%;
        transform: translate(-51.6%, -45%);
    }
    #buttons li {
        display: inline;
        padding-left: 11px;
    }
    </style>

    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-＊＊＊＊＊＊＊＊＊"
         crossorigin="anonymous">
    </script>

    </head>
    <body>

      <h1 id="time">
        <div id="T1"></div>
      </h1>

        <div id="myStopwatch">
            00:00:00
        </div>

        <ul id="buttons">
            <li><button onclick="startTimer()">Start</button></li>
            <li><button onclick="stopTimer()">Stop</button></li>

            <li><button onclick="resetTimer()">Reset</button></li>
        </ul>

        <script>
        const timer = document.getElementById('myStopwatch');

        let hr = 0;
        let min = 0;
        let sec = 0;
        let stoptime = true;

        function startTimer() {
          if (stoptime == true) {
                stoptime = false;
                timerCycle();
            }
        }
        function stopTimer() {
          if (stoptime == false) {
            stoptime = true;
          }
        }

        function timerCycle() {
            if (stoptime == false) {
            sec = parseInt(sec);
            min = parseInt(min);
            hr = parseInt(hr);

            sec += 1;

            if (sec == 60) {
              min += 1;
              sec = 0;
            }
            if (min == 60) {
              hr += 1;
              min = 0;
              sec = 0;
            }

            if (sec < 10 || sec == 0) {
              sec = '0' + sec;
            }
            if (min < 10 || min == 0) {
              min = '0' + min;
            }
            if (hr < 10 || hr == 0) {
              hr = '0' + hr;
            }

            timer.innerHTML = hr + ':' + min + ':' + sec;

            setTimeout("timerCycle()", 1000);
          }
        }

        function resetTimer() {
            timer.innerHTML = '00:00:00';
        }

        </script>

        <script>
        window.onload = function() {
          setInterval(function() {
            var dd = new Date();
            document.getElementById("T1").innerHTML = dd.toLocaleString();
          }, 1000);
        }
        </script>

    </body>
</html>

ソースコードはこちらを参考にさせていただきました。

https://dev.to/gspteck/create-a-stopwatch-in-javascript-2mak