|
1285
|
1 <!doctype html>
|
|
|
2 <html>
|
|
|
3 <head>
|
|
1294
|
4 <title>Stopwatch</title>
|
|
1285
|
5 <meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
6 <style>
|
|
1290
|
7 body {
|
|
|
8 text-align: center;
|
|
|
9 }
|
|
1285
|
10 button {
|
|
|
11 cursor: pointer;
|
|
1294
|
12 font-size: inherit;
|
|
1285
|
13 border-radius: 6px;
|
|
|
14 display: none;
|
|
|
15 }
|
|
|
16 </style>
|
|
|
17 <script>
|
|
|
18
|
|
|
19 function now() {
|
|
|
20 return Math.floor(Date.now()/1000);
|
|
|
21 }
|
|
|
22
|
|
1292
|
23 function show() {
|
|
1285
|
24 var start = localStorage.start;
|
|
|
25 var time;
|
|
|
26 if( !start ) {
|
|
|
27 time = 0;
|
|
|
28 } else {
|
|
|
29 var stop = localStorage.stop || now();
|
|
|
30 time = stop - start;
|
|
|
31 }
|
|
|
32 var seconds = time % 60;
|
|
|
33 time = Math.floor(time/60);
|
|
|
34 var minutes = time % 60;
|
|
|
35 time = Math.floor(time/60);
|
|
|
36 var hours = time;
|
|
1287
|
37 seconds = ('0'+seconds).slice(-2);
|
|
|
38 minutes = ('0'+minutes).slice(-2);
|
|
|
39 time = hours + ':' + minutes + ':' + seconds;
|
|
1285
|
40 document.querySelector('[time]').innerHTML = time;
|
|
|
41
|
|
1292
|
42 // fix buttons
|
|
1285
|
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 {
|
|
1287
|
64 localStorage.removeItem('stop');
|
|
1285
|
65 localStorage.start = now() - (stop - localStorage.start);
|
|
|
66 }
|
|
1292
|
67 show();
|
|
1285
|
68 }
|
|
|
69
|
|
|
70 function stop() {
|
|
|
71 localStorage.stop = now();
|
|
1292
|
72 show();
|
|
1285
|
73 }
|
|
|
74
|
|
|
75 function reset() {
|
|
1287
|
76 localStorage.removeItem('start');
|
|
|
77 localStorage.removeItem('stop');
|
|
1292
|
78 show();
|
|
1285
|
79 }
|
|
|
80
|
|
|
81 function loaded() {
|
|
1292
|
82 show();
|
|
|
83 setInterval(show,1000);
|
|
1285
|
84 }
|
|
|
85
|
|
|
86 </script>
|
|
|
87 </head>
|
|
|
88 <body onload="loaded()">
|
|
|
89 <h1 time></h1>
|
|
|
90 <button start onclick="start()">start</button>
|
|
|
91 <button stop onclick="stop()">stop</button>
|
|
|
92 <button reset onclick="reset()">reset</button>
|
|
|
93 </body>
|
|
|
94 </html>
|
