Mercurial Hosting > luan

comparison website/src/fschmidt/stopwatch.html @ 1285:fad40fe3282d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add personal web tools
author Franklin Schmidt <fschmidt@gmail.com>
date Wed, 26 Dec 2018 14:11:08 -0700
parents
children d9b86675be24
comparison
equal deleted inserted replaced
1284:1b46c8e6c647 1285:fad40fe3282d
1 <!doctype html>
2 <html>
3 <head>
4 <meta name="viewport" content="width=device-width, initial-scale=1">
5 <style>
6 button {
7 cursor: pointer;
8 font-size: 1em;
9 border-radius: 6px;
10 display: none;
11 }
12 button:focus {
13 outline: inherit;
14 }
15 </style>
16 <script>
17
18 function now() {
19 return Math.floor(Date.now()/1000);
20 }
21
22 function showTime() {
23 var start = localStorage.start;
24 var time;
25 if( !start ) {
26 time = 0;
27 } else {
28 var stop = localStorage.stop || now();
29 time = stop - start;
30 }
31 var seconds = time % 60;
32 time = Math.floor(time/60);
33 var minutes = time % 60;
34 time = Math.floor(time/60);
35 var hours = time;
36 seconds = ("0"+seconds).slice(-2);
37 minutes = ("0"+minutes).slice(-2);
38 time = hours + ":" + minutes + ":" + seconds;
39 document.querySelector('[time]').innerHTML = time;
40 }
41
42 function fixButtons() {
43 var isRunning = localStorage.start && !localStorage.stop;
44 if( isRunning ) {
45 document.querySelector('[start]').style.display = 'none';
46 document.querySelector('[stop]').style.display = 'inline-block';
47 document.querySelector('[reset]').style.display = 'none';
48 } else {
49 document.querySelector('[start]').style.display = 'inline-block';
50 document.querySelector('[stop]').style.display = 'none';
51 if( localStorage.start ) {
52 document.querySelector('[reset]').style.display = 'inline-block';
53 } else {
54 document.querySelector('[reset]').style.display = 'none';
55 }
56 }
57 }
58
59 function start() {
60 var stop = localStorage.stop;
61 if( !stop ) {
62 localStorage.start = now();
63 } else {
64 localStorage.removeItem("stop");
65 localStorage.start = now() - (stop - localStorage.start);
66 }
67 fixButtons();
68 }
69
70 function stop() {
71 localStorage.stop = now();
72 fixButtons();
73 }
74
75 function reset() {
76 localStorage.removeItem("start");
77 localStorage.removeItem("stop");
78 showTime();
79 fixButtons();
80 }
81
82 function loaded() {
83 showTime();
84 fixButtons();
85 setInterval(showTime,1000);
86 }
87
88 </script>
89 </head>
90 <body onload="loaded()">
91 <h1 time></h1>
92 <button start onclick="start()">start</button>
93 <button stop onclick="stop()">stop</button>
94 <button reset onclick="reset()">reset</button>
95 </body>
96 </html>