Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 3ff1ee9

Browse files
update stopwatch project
1 parent 61d4cf2 commit 3ff1ee9

File tree

5 files changed

+79
-115
lines changed

5 files changed

+79
-115
lines changed

‎projects/simple-stopwatch/index.html

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎projects/simple-stopwatch/stopwatch.js

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎projects/stopwatch/index.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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>Stopwatch</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
12+
<div id="timer">00:00:00</div>
13+
<div id="buttons">
14+
<button id="start">Start</button>
15+
<button id="stop">Stop</button>
16+
<button id="reset">Reset</button>
17+
</div>
18+
<script src="index.js"></script>
19+
</body>
20+
</html>

‎projects/stopwatch/index.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const timerEl = document.getElementById("timer");
2+
const startButtonEl = document.getElementById("start");
3+
const stopButtonEl = document.getElementById("stop");
4+
const resetButtonEl = document.getElementById("reset");
5+
6+
let startTime = 0;
7+
let elapsedTime = 0;
8+
let timerInterval;
9+
10+
function startTimer() {
11+
startTime = Date.now() - elapsedTime;
12+
13+
timerInterval = setInterval(() => {
14+
elapsedTime = Date.now() - startTime;
15+
timerEl.textContent = formatTime(elapsedTime);
16+
}, 10);
17+
18+
startButtonEl.disabled = true;
19+
stopButtonEl.disabled = false;
20+
}
21+
22+
function formatTime(elapsedTime) {
23+
const milliseconds = Math.floor((elapsedTime % 1000) / 10);
24+
const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
25+
const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
26+
const hours = Math.floor(elapsedTime / (1000 * 60 * 60));
27+
return (
28+
(hours ? (hours > 9 ? hours : "0" + hours) : "00") +
29+
":" +
30+
(minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") +
31+
":" +
32+
(seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00") +
33+
"." +
34+
(milliseconds > 9 ? milliseconds : "0" + milliseconds)
35+
);
36+
}
37+
function stopTimer() {
38+
clearInterval(timerInterval);
39+
startButtonEl.disabled = false;
40+
stopButtonEl.disabled = true;
41+
}
42+
function resetTimer() {
43+
clearInterval(timerInterval);
44+
45+
elapsedTime = 0;
46+
timerEl.textContent = "00:00:00";
47+
48+
startButtonEl.disabled = false;
49+
stopButtonEl.disabled = true;
50+
}
51+
52+
startButtonEl.addEventListener("click", startTimer);
53+
stopButtonEl.addEventListener("click", stopTimer);
54+
resetButtonEl.addEventListener("click", resetTimer);

‎projects/simple-stopwatch/style.css renamed to ‎projects/stopwatch/style.css

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ body {
44
display: flex;
55
flex-direction: column;
66
justify-content: center;
7-
align-items: center;
8-
height: 100vh;
7+
min-height: 100vh;
98
overflow: hidden;
9+
align-items: center;
1010
}
1111

1212
#timer {
1313
font-size: 7rem;
1414
font-weight: 700;
15-
color: #f92672;
1615
text-shadow: 2px 2px #f8a5c2;
17-
/* In the current code, the value 2px 2px #f8a5c2 sets a shadow that is 2 pixels to the right and 2 pixels down of the text, with a blur radius of 0 (no blur), and a color of #f8a5c2. */
16+
color:#f92672;
1817
width: 600px;
1918
text-align: center;
2019
margin: 40px auto;
@@ -29,34 +28,26 @@ button {
2928
background-color: #f92672;
3029
color: white;
3130
border: none;
32-
border-radius: 30px;
3331
font-size: 2rem;
3432
font-weight: bold;
3533
padding: 1.5rem 4rem;
36-
/* In the current code, the value 1.5rem 4rem sets a padding of 1.5rem (24px) for the top and bottom sides of the buttons, and 4rem (64px) for the left and right sides of the buttons. */
3734
margin: 1rem;
35+
border-radius: 30px;
3836
cursor: pointer;
39-
transition: background-color 0.2s;
4037
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
38+
transition: all 0.2s;
4139
}
4240

4341
button:hover {
4442
background-color: #f44583;
4543
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
4644
}
4745

48-
button:active {
49-
background-color: #f34282;
50-
box-shadow: none;
51-
}
52-
5346
button[disabled] {
5447
opacity: 0.5;
5548
cursor: default;
5649
}
5750

58-
/* add media query */
59-
6051
@media (max-width: 800px) {
6152
#timer {
6253
font-size: 4rem;
@@ -67,11 +58,4 @@ button[disabled] {
6758
font-size: 1.5rem;
6859
padding: 1rem 2rem;
6960
}
70-
7161
}
72-
73-
74-
75-
76-
/* add media query for tablet size */
77-

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /