annotate website/src/fschmidt/stopwatch.html @ 1287:d9b86675be24

minor
author Franklin Schmidt <fschmidt@gmail.com>
date Thu, 27 Dec 2018 12:01:30 -0700
parents fad40fe3282d
children fb802d8aba0b
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>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
4 <meta name="viewport" content="width=device-width, initial-scale=1">
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
5 <style>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
6 button {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
7 cursor: pointer;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
8 font-size: 1em;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
9 border-radius: 6px;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
10 display: none;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
11 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
12 button:focus {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
13 outline: inherit;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
14 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
15 </style>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
16 <script>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
17
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
18 function now() {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
19 return Math.floor(Date.now()/1000);
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
20 }
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 function showTime() {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
23 var start = localStorage.start;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
24 var time;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
25 if( !start ) {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
26 time = 0;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
27 } else {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
28 var stop = localStorage.stop || now();
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
29 time = stop - start;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
30 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
31 var seconds = time % 60;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
32 time = Math.floor(time/60);
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
33 var minutes = time % 60;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
34 time = Math.floor(time/60);
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
35 var hours = time;
1287
Franklin Schmidt <fschmidt@gmail.com>
parents: 1285
diff changeset
36 seconds = ('0'+seconds).slice(-2);
Franklin Schmidt <fschmidt@gmail.com>
parents: 1285
diff changeset
37 minutes = ('0'+minutes).slice(-2);
Franklin Schmidt <fschmidt@gmail.com>
parents: 1285
diff changeset
38 time = hours + ':' + minutes + ':' + seconds;
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
39 document.querySelector('[time]').innerHTML = time;
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
40 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
41
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
42 function fixButtons() {
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 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
67 fixButtons();
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();
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
72 fixButtons();
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');
1285
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
78 showTime();
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
79 fixButtons();
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
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
82 function loaded() {
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
83 showTime();
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
84 fixButtons();
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
85 setInterval(showTime,1000);
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
86 }
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
87
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
88 </script>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
89 </head>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
90 <body onload="loaded()">
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
91 <h1 time></h1>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
92 <button start onclick="start()">start</button>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
93 <button stop onclick="stop()">stop</button>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
94 <button reset onclick="reset()">reset</button>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
95 </body>
fad40fe3282d add personal web tools
Franklin Schmidt <fschmidt@gmail.com>
parents:
diff changeset
96 </html>