|
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 </style>
|
|
|
16 <script>
|
|
|
17
|
|
|
18 function now() {
|
|
|
19 return Math.floor(Date.now()/1000);
|
|
|
20 }
|
|
|
21
|
|
1292
|
22 function show() {
|
|
1285
|
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;
|
|
1287
|
36 seconds = ('0'+seconds).slice(-2);
|
|
|
37 minutes = ('0'+minutes).slice(-2);
|
|
|
38 time = hours + ':' + minutes + ':' + seconds;
|
|
1285
|
39 document.querySelector('[time]').innerHTML = time;
|
|
|
40
|
|
1292
|
41 // fix buttons
|
|
1285
|
42 var isRunning = localStorage.start && !localStorage.stop;
|
|
|
43 if( isRunning ) {
|
|
|
44 document.querySelector('[start]').style.display = 'none';
|
|
|
45 document.querySelector('[stop]').style.display = 'inline-block';
|
|
|
46 document.querySelector('[reset]').style.display = 'none';
|
|
|
47 } else {
|
|
|
48 document.querySelector('[start]').style.display = 'inline-block';
|
|
|
49 document.querySelector('[stop]').style.display = 'none';
|
|
|
50 if( localStorage.start ) {
|
|
|
51 document.querySelector('[reset]').style.display = 'inline-block';
|
|
|
52 } else {
|
|
|
53 document.querySelector('[reset]').style.display = 'none';
|
|
|
54 }
|
|
|
55 }
|
|
|
56 }
|
|
|
57
|
|
|
58 function start() {
|
|
|
59 var stop = localStorage.stop;
|
|
|
60 if( !stop ) {
|
|
|
61 localStorage.start = now();
|
|
|
62 } else {
|
|
1287
|
63 localStorage.removeItem('stop');
|
|
1285
|
64 localStorage.start = now() - (stop - localStorage.start);
|
|
|
65 }
|
|
1292
|
66 show();
|
|
1285
|
67 }
|
|
|
68
|
|
|
69 function stop() {
|
|
|
70 localStorage.stop = now();
|
|
1292
|
71 show();
|
|
1285
|
72 }
|
|
|
73
|
|
|
74 function reset() {
|
|
1287
|
75 localStorage.removeItem('start');
|
|
|
76 localStorage.removeItem('stop');
|
|
1292
|
77 show();
|
|
1285
|
78 }
|
|
|
79
|
|
|
80 function loaded() {
|
|
1292
|
81 show();
|
|
|
82 setInterval(show,1000);
|
|
1285
|
83 }
|
|
|
84
|
|
|
85 </script>
|
|
|
86 </head>
|
|
|
87 <body onload="loaded()">
|
|
|
88 <h1 time></h1>
|
|
|
89 <button start onclick="start()">start</button>
|
|
|
90 <button stop onclick="stop()">stop</button>
|
|
|
91 <button reset onclick="reset()">reset</button>
|
|
|
92 </body>
|
|
|
93 </html>
|
