|
1285
|
1 <!doctype html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
5 <style>
|
|
1290
|
6 body {
|
|
|
7 text-align: center;
|
|
|
8 }
|
|
1285
|
9 button {
|
|
|
10 cursor: pointer;
|
|
|
11 font-size: 1em;
|
|
|
12 border-radius: 6px;
|
|
|
13 display: none;
|
|
|
14 }
|
|
|
15 button:focus {
|
|
|
16 outline: inherit;
|
|
|
17 }
|
|
|
18 </style>
|
|
|
19 <script>
|
|
|
20
|
|
|
21 function now() {
|
|
|
22 return Math.floor(Date.now()/1000);
|
|
|
23 }
|
|
|
24
|
|
1292
|
25 function show() {
|
|
1285
|
26 var start = localStorage.start;
|
|
|
27 var time;
|
|
|
28 if( !start ) {
|
|
|
29 time = 0;
|
|
|
30 } else {
|
|
|
31 var stop = localStorage.stop || now();
|
|
|
32 time = stop - start;
|
|
|
33 }
|
|
|
34 var seconds = time % 60;
|
|
|
35 time = Math.floor(time/60);
|
|
|
36 var minutes = time % 60;
|
|
|
37 time = Math.floor(time/60);
|
|
|
38 var hours = time;
|
|
1287
|
39 seconds = ('0'+seconds).slice(-2);
|
|
|
40 minutes = ('0'+minutes).slice(-2);
|
|
|
41 time = hours + ':' + minutes + ':' + seconds;
|
|
1285
|
42 document.querySelector('[time]').innerHTML = time;
|
|
|
43
|
|
1292
|
44 // fix buttons
|
|
1285
|
45 var isRunning = localStorage.start && !localStorage.stop;
|
|
|
46 if( isRunning ) {
|
|
|
47 document.querySelector('[start]').style.display = 'none';
|
|
|
48 document.querySelector('[stop]').style.display = 'inline-block';
|
|
|
49 document.querySelector('[reset]').style.display = 'none';
|
|
|
50 } else {
|
|
|
51 document.querySelector('[start]').style.display = 'inline-block';
|
|
|
52 document.querySelector('[stop]').style.display = 'none';
|
|
|
53 if( localStorage.start ) {
|
|
|
54 document.querySelector('[reset]').style.display = 'inline-block';
|
|
|
55 } else {
|
|
|
56 document.querySelector('[reset]').style.display = 'none';
|
|
|
57 }
|
|
|
58 }
|
|
|
59 }
|
|
|
60
|
|
|
61 function start() {
|
|
|
62 var stop = localStorage.stop;
|
|
|
63 if( !stop ) {
|
|
|
64 localStorage.start = now();
|
|
|
65 } else {
|
|
1287
|
66 localStorage.removeItem('stop');
|
|
1285
|
67 localStorage.start = now() - (stop - localStorage.start);
|
|
|
68 }
|
|
1292
|
69 show();
|
|
1285
|
70 }
|
|
|
71
|
|
|
72 function stop() {
|
|
|
73 localStorage.stop = now();
|
|
1292
|
74 show();
|
|
1285
|
75 }
|
|
|
76
|
|
|
77 function reset() {
|
|
1287
|
78 localStorage.removeItem('start');
|
|
|
79 localStorage.removeItem('stop');
|
|
1292
|
80 show();
|
|
1285
|
81 }
|
|
|
82
|
|
|
83 function loaded() {
|
|
1292
|
84 show();
|
|
|
85 setInterval(show,1000);
|
|
1285
|
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>
|
