annotate website/src/fschmidt/stopwatch.html @ 1813:fa0e73119b7c

docs work
author Franklin Schmidt <fschmidt@gmail.com>
date Mon, 10 Jun 2024 23:19:40 -0600
parents 2555154ad19f
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
1 <!doctype html>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
2 <html>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
3 <head>
1294
Franklin Schmidt <fschmidt@gmail.com>
parents: 1293
diff changeset
4 <title>Stopwatch</title>
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
5 <meta name="viewport" content="width=device-width, initial-scale=1">
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
6 <style>
1290
Franklin Schmidt <fschmidt@gmail.com>
parents: 1287
diff changeset
7 body {
Franklin Schmidt <fschmidt@gmail.com>
parents: 1287
diff changeset
8 text-align: center;
Franklin Schmidt <fschmidt@gmail.com>
parents: 1287
diff changeset
9 }
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
10 button {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
11 cursor: pointer;
1294
Franklin Schmidt <fschmidt@gmail.com>
parents: 1293
diff changeset
12 font-size: inherit;
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
13 border-radius: 6px;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
14 display: none;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
15 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
16 </style>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
17 <script>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
18
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
19 function now() {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
20 return Math.floor(Date.now()/1000);
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
21 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
22
1292
Franklin Schmidt <fschmidt@gmail.com>
parents: 1290
diff changeset
23 function show() {
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
24 var start = localStorage.start;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
25 var time;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
26 if( !start ) {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
27 time = 0;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
28 } else {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
29 var stop = localStorage.stop || now();
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
30 time = stop - start;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
31 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
32 var seconds = time % 60;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
33 time = Math.floor(time/60);
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
34 var minutes = time % 60;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
35 time = Math.floor(time/60);
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
36 var hours = time;
1287
Franklin Schmidt <fschmidt@gmail.com>
parents: 1285
diff changeset
37 seconds = ('0'+seconds).slice(-2);
Franklin Schmidt <fschmidt@gmail.com>
parents: 1285
diff changeset
38 minutes = ('0'+minutes).slice(-2);
Franklin Schmidt <fschmidt@gmail.com>
parents: 1285
diff changeset
39 time = hours + ':' + minutes + ':' + seconds;
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
40 document.querySelector('[time]').innerHTML = time;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
41
1292
Franklin Schmidt <fschmidt@gmail.com>
parents: 1290
diff changeset
42 // fix buttons
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
43 var isRunning = localStorage.start && !localStorage.stop;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
44 if( isRunning ) {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
45 document.querySelector('[start]').style.display = 'none';
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
46 document.querySelector('[stop]').style.display = 'inline-block';
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
47 document.querySelector('[reset]').style.display = 'none';
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
48 } else {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
49 document.querySelector('[start]').style.display = 'inline-block';
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
50 document.querySelector('[stop]').style.display = 'none';
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
51 if( localStorage.start ) {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
52 document.querySelector('[reset]').style.display = 'inline-block';
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
53 } else {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
54 document.querySelector('[reset]').style.display = 'none';
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
55 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
56 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
57 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
58
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
59 function start() {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
60 var stop = localStorage.stop;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
61 if( !stop ) {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
62 localStorage.start = now();
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
63 } else {
1287
Franklin Schmidt <fschmidt@gmail.com>
parents: 1285
diff changeset
64 localStorage.removeItem('stop');
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
65 localStorage.start = now() - (stop - localStorage.start);
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
66 }
1292
Franklin Schmidt <fschmidt@gmail.com>
parents: 1290
diff changeset
67 show();
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
68 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
69
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
70 function stop() {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
71 localStorage.stop = now();
1292
Franklin Schmidt <fschmidt@gmail.com>
parents: 1290
diff changeset
72 show();
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
73 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
74
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
75 function reset() {
1287
Franklin Schmidt <fschmidt@gmail.com>
parents: 1285
diff changeset
76 localStorage.removeItem('start');
Franklin Schmidt <fschmidt@gmail.com>
parents: 1285
diff changeset
77 localStorage.removeItem('stop');
1292
Franklin Schmidt <fschmidt@gmail.com>
parents: 1290
diff changeset
78 show();
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
79 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
80
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
81 function loaded() {
1292
Franklin Schmidt <fschmidt@gmail.com>
parents: 1290
diff changeset
82 show();
Franklin Schmidt <fschmidt@gmail.com>
parents: 1290
diff changeset
83 setInterval(show,1000);
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
84 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
85
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
86 </script>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
87 </head>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
88 <body onload="loaded()">
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
89 <h1 time></h1>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
90 <button start onclick="start()">start</button>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
91 <button stop onclick="stop()">stop</button>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
92 <button reset onclick="reset()">reset</button>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
93 </body>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
94 </html>