Skip to content

Commit d194876

Browse files
authoredFeb 16, 2023
Add files via upload
1 parent bf4e8a7 commit d194876

File tree

3 files changed

+79
-0
lines changed

3 files changed

+79
-0
lines changed
 

‎index.html

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
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>

‎script.js

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
}

‎style.css

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
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+

0 commit comments

Comments
 (0)