stopwatch.html (view raw)
1<!DOCTYPE html>
2<html>
3<head>
4 <meta charset="utf-8">
5 <title>Stopwatch</title>
6 <link rel="shortcut icon" type="image/svg+xml" href="stopwatch.svg"/>
7<style>
8body {
9 background-color: #000;
10 color: #eee;
11}
12.big {
13 font-size: 8em;
14 text-align: center;
15 margin-bottom: 0;
16}
17.smaller {
18 font-size: 0.2em;
19 margin-left: -1.5em;
20}
21.center {
22 margin: 1em auto;
23 width: 60%;
24}
25button {
26 border-radius: 0;
27 border: 0;
28 width: 46%;
29 height: 4em;
30}
31button {
32 font-size: 2em;
33 color: #fff;
34 transition: background-color 300ms;
35}
36button.green {
37 background-color: #373;
38}
39button.green:hover {
40 background-color: #595;
41}
42button.red {
43 background-color: #733;
44 float: right;
45}
46button.red:hover {
47 background-color: #955;
48}
49</style>
50</head>
51<body>
52 <p class="big">
53 <span id="counter">00:00:00</span>
54 <span id="counterms" class="smaller">.000</span>
55 </p>
56 <div class="center">
57 <button id="toggle" class="green" type="button"
58 onclick="toggleCounter()">Start</button>
59 <button type="button" class="red"
60 onclick="resetCounter()">Reset</button>
61 </div>
62
63 <script>
64const counter = document.getElementById("counter");
65const counterms = document.getElementById("counterms");
66const toggle = document.getElementById("toggle");
67
68let start = null;
69let paused = null;
70
71function renderCounter() {
72 if (start == null) {
73 counterms.innerHTML = ".000";
74 counter.innerHTML = "00:00:00";
75 return;
76 }
77
78 var t = (paused == null ? Date.now() : paused) - start;
79 var h = Math.floor(t / 3600000).toString().padStart(2, "0");
80 t %= 3600000;
81 var m = Math.floor(t / 60000).toString().padStart(2, "0");
82 t %= 60000;
83 var s = Math.floor(t / 1000).toString().padStart(2, "0");
84 t %= 1000;
85 var z = Math.floor(t).toString().padStart(3, "0");
86
87 counterms.innerHTML = `.${z}`;
88 counter.innerHTML = `${h}:${m}:${s}`
89}
90
91function updateCounter(timestamp) {
92 if (start != null && paused == null) {
93 renderCounter();
94 window.requestAnimationFrame(updateCounter);
95 }
96}
97
98function toggleCounter() {
99 const now = Date.now();
100 if (start != null && paused == null) {
101 paused = now;
102 toggle.innerHTML = "Start";
103 renderCounter();
104 } else {
105 if (start == null) {
106 start = now;
107 } else if (paused != null) {
108 start += now - paused;
109 paused = null;
110 }
111 toggle.innerHTML = "Stop";
112 updateCounter(0);
113 }
114}
115
116function resetCounter() {
117 start = null;
118 paused = null;
119 toggle.innerHTML = "Start";
120 renderCounter();
121}
122
123renderCounter();
124 </script>
125</body>
126</html>