Movatterモバイル変換

[0]ホーム
URL:

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

Commit3ff1ee9

Browse files
update stopwatch project
1 parent61d4cf2 commit3ff1ee9

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+
<htmllang="en">
3+
<head>
4+
<metacharset="UTF-8">
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
7+
<title>Stopwatch</title>
8+
<linkrel="stylesheet"href="style.css">
9+
</head>
10+
<body>
11+
12+
<divid="timer">00:00:00</div>
13+
<divid="buttons">
14+
<buttonid="start">Start</button>
15+
<buttonid="stop">Stop</button>
16+
<buttonid="reset">Reset</button>
17+
</div>
18+
<scriptsrc="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+
consttimerEl=document.getElementById("timer");
2+
conststartButtonEl=document.getElementById("start");
3+
conststopButtonEl=document.getElementById("stop");
4+
constresetButtonEl=document.getElementById("reset");
5+
6+
letstartTime=0;
7+
letelapsedTime=0;
8+
lettimerInterval;
9+
10+
functionstartTimer(){
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+
functionformatTime(elapsedTime){
23+
constmilliseconds=Math.floor((elapsedTime%1000)/10);
24+
constseconds=Math.floor((elapsedTime%(1000*60))/1000);
25+
constminutes=Math.floor((elapsedTime%(1000*60*60))/(1000*60));
26+
consthours=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+
functionstopTimer(){
38+
clearInterval(timerInterval);
39+
startButtonEl.disabled=false;
40+
stopButtonEl.disabled=true;
41+
}
42+
functionresetTimer(){
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.cssrenamed 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:2px2px#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 acolor 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.5rem4rem;
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-color0.2s;
4037
box-shadow:2px2px10pxrgba(0,0,0,0.3);
38+
transition: all0.2s;
4139
}
4240

4341
button:hover {
4442
background-color:#f44583;
4543
box-shadow:2px2px10pxrgba(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:1rem2rem;
6960
}
70-
7161
}
72-
73-
74-
75-
76-
/* add media query for tablet size */
77-

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp