|
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
|
|
|
25 function showTime() {
|
|
|
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 }
|
|
|
44
|
|
|
45 function fixButtons() {
|
|
|
46 var isRunning = localStorage.start && !localStorage.stop;
|
|
|
47 if( isRunning ) {
|
|
|
48 document.querySelector('[start]').style.display = 'none';
|
|
|
49 document.querySelector('[stop]').style.display = 'inline-block';
|
|
|
50 document.querySelector('[reset]').style.display = 'none';
|
|
|
51 } else {
|
|
|
52 document.querySelector('[start]').style.display = 'inline-block';
|
|
|
53 document.querySelector('[stop]').style.display = 'none';
|
|
|
54 if( localStorage.start ) {
|
|
|
55 document.querySelector('[reset]').style.display = 'inline-block';
|
|
|
56 } else {
|
|
|
57 document.querySelector('[reset]').style.display = 'none';
|
|
|
58 }
|
|
|
59 }
|
|
|
60 }
|
|
|
61
|
|
|
62 function start() {
|
|
|
63 var stop = localStorage.stop;
|
|
|
64 if( !stop ) {
|
|
|
65 localStorage.start = now();
|
|
|
66 } else {
|
|
1287
|
67 localStorage.removeItem('stop');
|
|
1285
|
68 localStorage.start = now() - (stop - localStorage.start);
|
|
|
69 }
|
|
|
70 fixButtons();
|
|
|
71 }
|
|
|
72
|
|
|
73 function stop() {
|
|
|
74 localStorage.stop = now();
|
|
|
75 fixButtons();
|
|
|
76 }
|
|
|
77
|
|
|
78 function reset() {
|
|
1287
|
79 localStorage.removeItem('start');
|
|
|
80 localStorage.removeItem('stop');
|
|
1285
|
81 showTime();
|
|
|
82 fixButtons();
|
|
|
83 }
|
|
|
84
|
|
|
85 function loaded() {
|
|
|
86 showTime();
|
|
|
87 fixButtons();
|
|
|
88 setInterval(showTime,1000);
|
|
|
89 }
|
|
|
90
|
|
|
91 </script>
|
|
|
92 </head>
|
|
|
93 <body onload="loaded()">
|
|
|
94 <h1 time></h1>
|
|
|
95 <button start onclick="start()">start</button>
|
|
|
96 <button stop onclick="stop()">stop</button>
|
|
|
97 <button reset onclick="reset()">reset</button>
|
|
|
98 </body>
|
|
|
99 </html>
|
