Webbserver - Love Blomberg

Show sourcecode

The following files exists in this folder. Click to view.

public_html/gamla-kurser/webbutv2/övningar/js_timers/

js_timers_a.html
js_timers_b.html
js_timers_c.html
js_timers_d.html
js_timers_e.html
js_timers_f.html
js_timers_g.html
js_timers_h.html
js_timers_i.html
js_timers_j.html
sound/

js_timers_g.html

111 lines UTF-8 Windows (CRLF)
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS Timers G</title>
  <style>
    .hidden {
      visibility: hidden;
    }
    .timers-container {
      display: flex;
      justify-content: space-around;
    }
    .timer {
      text-align: center;
    }
  </style>
</head>
<body>
<h1>JS Timers G</h1>

<button onclick="toggleTimers()" id="startButton">Start</button>

<div class="timers-container">
  <div class="timer">
    <h2>Klocka 1</h2>
    <h2 id="timer1">0.00 sekunder.</h2>
    <h2 id="bell1" class="hidden">🔔</h2>
  </div>
  <div class="timer">
    <h2>Klocka 2</h2>
    <h2 id="timer2">0.00 sekunder.</h2>
    <h2 id="bell2" class="hidden">🔔</h2>
  </div>
  <div class="timer">
    <h2>Klocka 3</h2>
    <h2 id="timer3">0.00 sekunder.</h2>
    <h2 id="bell3" class="hidden">🔔</h2>
  </div>
</div>

<script>
  // Klocka 1
  let timer1 = document.getElementById("timer1");
  let bell1 = document.getElementById("bell1");
  let count1 = 0;
  let intervalId1;

  function myTimer1() {
    count1++;
    timer1.innerHTML = "" + (count1 / 100).toFixed(2) + " sekunder.";
    if (count1 % 200 === 0) { // 3 seconds
      new Audio("./sound/bell.mp3").play();
      bell1.classList.remove("hidden");
      setTimeout(() => bell1.classList.add("hidden"), 500);
    }
  }

  // Klocka 2
  let timer2 = document.getElementById("timer2");
  let bell2 = document.getElementById("bell2");
  let count2 = 0;
  let intervalId2;

  function myTimer2() {
    count2++;
    timer2.innerHTML = "" + (count2 / 100).toFixed(2) + " sekunder.";
    if (count2 % 300 === 0) { // 2 seconds
      new Audio("./sound/bell.mp3").play();
      bell2.classList.remove("hidden");
      setTimeout(() => bell2.classList.add("hidden"), 500);
    }
  }

  // Klocka 3
  let timer3 = document.getElementById("timer3");
  let bell3 = document.getElementById("bell3");
  let count3 = 0;
  let intervalId3;

  function myTimer3() {
    count3++;
    timer3.innerHTML = "" + (count3 / 100).toFixed(2) + " sekunder.";
    if (count3 % 400 === 0) { // 4 seconds
      new Audio("./sound/bell.mp3").play();
      bell3.classList.remove("hidden");
      setTimeout(() => bell3.classList.add("hidden"), 500);
    }
  }

  // Växla alla timers
  let button = document.getElementById("startButton");
  let active = false;

  function toggleTimers() {
    if (active) {
      clearInterval(intervalId1);
      clearInterval(intervalId2);
      clearInterval(intervalId3);
      button.innerHTML = "Start";
    } else {
      intervalId1 = setInterval(myTimer1, 10);
      intervalId2 = setInterval(myTimer2, 10);
      intervalId3 = setInterval(myTimer3, 10);
      button.innerHTML = "Stop";
    }
    active = !active;
  }
</script>
</body>
</html>