|
1285
|
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>
|
