File tree 3 files changed +79
-0
lines changed
3 files changed +79
-0
lines changed Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html lang ="en ">
3
+ < head >
4
+ < meta charset ="UTF-8 ">
5
+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge ">
6
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7
+ < title > Document</ title >
8
+ < link rel ="stylesheet " href ="style.css ">
9
+ </ head >
10
+ < body >
11
+ < div class ="stopwatch ">
12
+ < h1 id ="display "> 00:00:00</ h1 >
13
+ < button id ="start " onclick ="start() "> Start</ button >
14
+ < button id ="stop " onclick ="stop() "> Stop</ button >
15
+ < button id ="reset " onclick ="reset() "> Reset</ button >
16
+ </ div >
17
+ < script src ="script.js "> </ script >
18
+ </ body >
19
+ </ html >
Original file line number Diff line number Diff line change
1
+ var startTime , elapsedTime = 0 , intervalId ;
2
+
3
+ function start ( ) {
4
+ if ( ! intervalId ) {
5
+ startTime = Date . now ( ) - elapsedTime ;
6
+ intervalId = setInterval ( updateTime , 10 ) ;
7
+ }
8
+ }
9
+
10
+ function updateTime ( ) {
11
+ elapsedTime = Date . now ( ) - startTime ;
12
+ document . getElementById ( "display" ) . innerHTML = formatTime ( elapsedTime ) ;
13
+ }
14
+
15
+ function stop ( ) {
16
+ clearInterval ( intervalId ) ;
17
+ intervalId = null ;
18
+ }
19
+
20
+ function reset ( ) {
21
+ clearInterval ( intervalId ) ;
22
+ intervalId = null ;
23
+ elapsedTime = 0 ;
24
+ document . getElementById ( "display" ) . innerHTML = formatTime ( elapsedTime ) ;
25
+ }
26
+
27
+ function formatTime ( time ) {
28
+ var date = new Date ( time ) ;
29
+ var hours = date . getUTCHours ( ) . toString ( ) . padStart ( 2 , "0" ) ;
30
+ var minutes = date . getUTCMinutes ( ) . toString ( ) . padStart ( 2 , "0" ) ;
31
+ var seconds = date . getUTCSeconds ( ) . toString ( ) . padStart ( 2 , "0" ) ;
32
+ var milliseconds = date . getUTCMilliseconds ( ) . toString ( ) . padStart ( 3 , "0" ) ;
33
+ return hours + ":" + minutes + ":" + seconds + "." + milliseconds ;
34
+ }
Original file line number Diff line number Diff line change
1
+ .stopwatch {
2
+ text-align : center;
3
+ font-family : Arial, sans-serif;
4
+ margin-top : 50px ;
5
+ }
6
+
7
+ h1 {
8
+ font-size : 3em ;
9
+ color : # 444 ;
10
+ }
11
+
12
+ button {
13
+ margin : 10px ;
14
+ padding : 10px 20px ;
15
+ font-size : 1.2em ;
16
+ background-color : # 0099ff ;
17
+ border : none;
18
+ color : # fff ;
19
+ border-radius : 5px ;
20
+ cursor : pointer;
21
+ }
22
+
23
+ button : hover {
24
+ background-color : # 0077cc ;
25
+ }
26
+
You can’t perform that action at this time.
0 commit comments