ストップウォッチアプリ

0.000秒
成功回数: 0
<!DOCTYPE html>
<html>
  <head>
    <title>ストップウォッチアプリ</title>
  </head>
  <body>
    <h1>ストップウォッチアプリ</h1>
    <p id="time">0.000秒</p>
    <p id="count">成功回数: 0</p>
    <button onclick="startStopwatch()">スタート</button>
    <button onclick="stopStopwatch()">ストップ</button>
    <script>
      let startTime;
      let count = 0;
      let timerId;
      const successRange = 0.3;
      const successMessage = ["素晴らしい！", "天才か？", "すごい！", "おめでとう！", "圧倒的成功！"];
      const failureMessage = "人生の敗者";

      function startStopwatch() {
        startTime = Date.now();
        timerId = setInterval(updateTime, 1);
      }

      function stopStopwatch() {
        clearInterval(timerId);
        const elapsedTime = Date.now() - startTime;
        const absError = Math.abs(5000 - elapsedTime);
        if (absError <= successRange * 1000) {
          const messageIndex = Math.floor(Math.random() * successMessage.length);
          alert(successMessage[messageIndex]);
          count++;
          document.getElementById("count").innerHTML = "成功回数: " + count;
        } else {
          const body = document.getElementsByTagName("body")[0];
          body.innerHTML = `<h1>${failureMessage}</h1>`;
          body.style = "background-color: black; color: white; font-size: 100px;";
          setTimeout(function() { showToast("再読み込みしてください") }, 3000);
        }
      }

      function updateTime() {
        const elapsedTime = Date.now() - startTime;
        document.getElementById("time").innerHTML = (elapsedTime / 1000).toFixed(3) + "秒";
      }
    </script>
  </body>
</html>