21. IT

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

データサイエンティスト
絹田 真也
千葉県市川市在住。大手通信キャリアのデータサイエンティスト。 個人で活動する場所が欲しくてブログをしています。 NP & Companyという個人事務所でITサービス企画開発も細々しています。 通信キャリアでデータサイエンティスト←古河電工でデータエンジニアリング←慶應大学←慶應高校
twitter-timeline