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 9a286ac

Browse files
Complete Timer
0 parents commit 9a286ac

File tree

2 files changed

+226
-0
lines changed

2 files changed

+226
-0
lines changed

‎beep.mp3

8.62 KB
Binary file not shown.

‎index.html

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
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+
<style>
9+
*{
10+
margin: 0;
11+
padding: 0;
12+
box-sizing: border-box;
13+
}
14+
body{
15+
height: 100vh;
16+
width: 100%;
17+
}
18+
.watch-container{
19+
width: 100%;
20+
min-height: 100%;
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: center;
24+
align-items: center;
25+
}
26+
.watch-container p{
27+
padding: 5px;
28+
letter-spacing: 1px;
29+
font-size: 72px;
30+
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
31+
}
32+
.watch-container p span{
33+
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
34+
}
35+
.clock-button{
36+
cursor: pointer;
37+
text-decoration: none;
38+
border: none;
39+
padding: 10px;
40+
margin: 5px;
41+
color: white;
42+
border-radius: 5px;
43+
min-width: 170px;
44+
font-size: 20px;
45+
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
46+
}
47+
#start{
48+
background-color: green;
49+
}
50+
#stop{
51+
background-color: red;
52+
}
53+
#reset{
54+
background-color: darkgrey;
55+
}
56+
.min-width{
57+
display: inline-block;
58+
min-width: 100px;
59+
text-align: center;
60+
font-size: 70px;
61+
padding: 10px;
62+
}
63+
.stopwatch-buttons{
64+
margin-top: 20px;
65+
}
66+
.input-items{
67+
display: flex;
68+
margin: 10px;
69+
box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
70+
}
71+
.input-box{
72+
width: 108px;
73+
height: 65px;
74+
margin: 5px;
75+
padding:5px;
76+
font-size: 40px;
77+
border: none;
78+
outline: none;
79+
box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
80+
}
81+
.input-group{
82+
display: flex;
83+
flex-direction: column;
84+
}
85+
.input-label{
86+
margin: 5px;
87+
font-size: 30px;
88+
}
89+
</style>
90+
</head>
91+
<body>
92+
93+
94+
<div class="watch-container">
95+
96+
<div id="inputContainer" class="input-items">
97+
<div class="input-group">
98+
<label class="input-label">Hour:</label>
99+
<input onchange="SetTimerValue()" id="inputHour" placeholder="00" class="input-box" type="number">
100+
</div>
101+
<div class="input-group">
102+
<label class="input-label">Minute:</label>
103+
<input onchange="SetTimerValue()" id="inputMinute" placeholder="00" class="input-box" type="number">
104+
</div>
105+
<div class="input-group">
106+
<label class="input-label">Second:</label>
107+
<input onchange="SetTimerValue()" id="inputSecond" placeholder="00" class="input-box" type="number">
108+
</div>
109+
</div>
110+
111+
<p id="outputContainer"><span class="min-width" id="hour">00</span> : <span class="min-width" id="minute">00</span> : <span class="min-width" id="second">00</span></p>
112+
113+
<div class="stopwatch-buttons">
114+
<button onclick="StartClock()" class="clock-button" id="start">Start</button>
115+
<button onclick="StopClock()" class="clock-button" id="stop">Stop</button>
116+
<button onclick="ResetClock()" class="clock-button" id="reset">Reset</button>
117+
</div>
118+
</div>
119+
120+
121+
122+
123+
124+
<script>
125+
var inputHour;
126+
var inputMinute;
127+
var inputSecond;
128+
var hour = document.getElementById("hour");
129+
var minute = document.getElementById("minute");
130+
var second = document.getElementById("second");
131+
var start = document.getElementById("start");
132+
var Stop = document.getElementById("stop");
133+
var stopWatch;
134+
var outputContainer = document.getElementById("outputContainer");
135+
136+
Stop.style.display = "none";
137+
outputContainer.style.display = "none";
138+
139+
function SetTimerValue()
140+
{
141+
inputHour = Number(document.getElementById("inputHour").value);
142+
inputMinute = Number(document.getElementById("inputMinute").value);
143+
inputSecond = Number(document.getElementById("inputSecond").value);
144+
}
145+
146+
function StartClock()
147+
{
148+
debugger
149+
if(inputHour > 0 || inputMinute > 0 || inputSecond > 0)
150+
{
151+
hour.innerHTML = FormatTime(inputHour);
152+
outputContainer.style.display = "flex";
153+
start.style.display = "none";
154+
Stop.style.display = "inline-block";
155+
stopWatch = setInterval(myClock, 1000);
156+
}
157+
}
158+
159+
function StopClock()
160+
{
161+
start.style.display = "inline-block";
162+
Stop.style.display = "none";
163+
164+
clearInterval(stopWatch);
165+
}
166+
167+
function ResetClock()
168+
{
169+
StopClock();
170+
outputContainer.style.display = "none";
171+
document.getElementById("inputHour").value = "";
172+
document.getElementById("inputMinute").value = "";
173+
document.getElementById("inputSecond").value = "";
174+
hour.innerHTML = "00";
175+
minute.innerHTML = "00";
176+
second.innerHTML = "00";
177+
inputHour = 0;
178+
inputMinute = 0;
179+
inputSecond = 0;
180+
}
181+
182+
function myClock()
183+
{
184+
if(inputSecond <= 0)
185+
{
186+
if(inputMinute <= 0)
187+
{
188+
if(inputHour == 0 && inputMinute == 0 && inputSecond ==0)
189+
{
190+
StopClock();
191+
new Audio('./beep.mp3').play()
192+
return;
193+
}
194+
else
195+
{
196+
inputHour--;
197+
}
198+
hour.innerHTML = FormatTime(inputHour);
199+
inputMinute = 60;
200+
}
201+
inputMinute--;
202+
minute.innerHTML = FormatTime(inputMinute);
203+
inputSecond = 60;
204+
}
205+
inputSecond--;
206+
second.innerHTML = FormatTime(inputSecond);
207+
208+
}
209+
210+
function FormatTime(time)
211+
{
212+
var formatedTime
213+
if(time < 10)
214+
{
215+
formatedTime = "0" + time.toString();
216+
}
217+
else
218+
{
219+
formatedTime = time;
220+
}
221+
return formatedTime
222+
}
223+
</script>
224+
225+
</body>
226+
</html>

0 commit comments

Comments
(0)

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