stopwatchtester/index.html at main · GhostService/stopwatchtester · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
  <head>
  <!-- Made By DapperLS for the 2023 CFISD GT Horizons Showcase -->
    <title>Stopwatch</title>
  </head>
  <body>
    <div id="stopwatch">0:0:0</div>
    <button onclick="startRandomTimer()">Start Timer</button>
    <button onclick="stopStopwatch()">Stop</button>
    <h1 id="test1"></h1>
    <h1 id="reactionTime"></h1>
    <script>
      let startTime;
      let endTime;
      let running = false;
      let timer;

      function startRandomTimer() {
        let randomTime = Math.random() * (10000 - 1000) + 1000;
        timer = setTimeout(startStopwatch, randomTime);
        console.log("Generated: " + randomTime);
        document.getElementById("test1").innerHTML = "Wait...";
      }

      function startStopwatch() {
        if (running) {
          return;
        }
        console.log("stopwatchStart");
        document.getElementById("test1").innerHTML = "Go!";
        new Audio('beepcropped.mp3').play()
        running = true;
        startTime = new Date();
        setInterval(updateStopwatch, 10);
      }

      function stopStopwatch() {
        if (!running) {
          return;
        }
        running = false;
        endTime = new Date();
        console.log("stopwatchStop");
      }

      function updateStopwatch() {
        if (!running) {
          return;
        }
        let currentTime = new Date();
        let elapsedTime = currentTime - startTime;

        let minutes = Math.floor(elapsedTime / (1000 * 60));
        elapsedTime -= minutes * (1000 * 60);

        let seconds = Math.floor(elapsedTime / 1000);
        elapsedTime -= seconds * 1000;

        let milliseconds = elapsedTime;

        let stopwatchElement = document.getElementById("stopwatch");
        stopwatchElement.innerHTML = `${minutes}:${seconds}:${milliseconds}`;
      }
    </script>
  </body>
</html>