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 153cb5d

Browse files
Added js and css fine
1 parent 9a286ac commit 153cb5d

File tree

3 files changed

+209
-218
lines changed

3 files changed

+209
-218
lines changed

‎index.html

Lines changed: 32 additions & 218 deletions
Original file line numberDiff line numberDiff line change
@@ -1,226 +1,40 @@
11
<!DOCTYPE html>
22
<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-
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>Js Timer</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
9312

94-
<div class="watch-container">
95-
96-
<div id="inputContainer" class="input-items">
97-
<div class="input-group">
98-
<labelclass="input-label">Hour:</label>
99-
<inputonchange="SetTimerValue()" id="inputHour" placeholder="00" class="input-box" type="number">
100-
</div>
101-
<div class="input-group">
102-
<labelclass="input-label">Minute:</label>
103-
<inputonchange="SetTimerValue()" id="inputMinute" placeholder="00" class="input-box" type="number">
104-
</div>
105-
<div class="input-group">
106-
<labelclass="input-label">Second:</label>
107-
<inputonchange="SetTimerValue()" id="inputSecond" placeholder="00" class="input-box" type="number">
13+
<div class="watch-container">
14+
<divid="inputContainer" class="input-items">
15+
<div class="input-group">
16+
<label class="input-label">Hour:</label>
17+
<inputonchange="SetTimerValue()" id="inputHour" placeholder="00" class="input-box" type="number">
18+
</div>
19+
<divclass="input-group">
20+
<label class="input-label">Minute:</label>
21+
<inputonchange="SetTimerValue()" id="inputMinute" placeholder="00" class="input-box" type="number">
22+
</div>
23+
<divclass="input-group">
24+
<label class="input-label">Second:</label>
25+
<inputonchange="SetTimerValue()" id="inputSecond" placeholder="00" class="input-box" type="number">
26+
</div>
10827
</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-
12228

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);
29+
<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>
20730

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>
31+
<div class="stopwatch-buttons">
32+
<button onclick="StartClock()" class="clock-button" id="startBtn">Start</button>
33+
<button onclick="StopClock()" class="clock-button" id="stopBtn">Stop</button>
34+
<button onclick="ResetClock()" class="clock-button" id="reset">Reset</button>
35+
</div>
36+
</div>
22437

225-
</body>
38+
<script src="main.js"></script>
39+
</body>
22640
</html>

‎main.js

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
var inputHour;
2+
var inputMinute;
3+
var inputSecond;
4+
var hour = document.getElementById("hour");
5+
var minute = document.getElementById("minute");
6+
var second = document.getElementById("second");
7+
var startBtn = document.getElementById("startBtn");
8+
var stopBtn = document.getElementById("stopBtn");
9+
var stopWatch;
10+
var outputContainer = document.getElementById("outputContainer");
11+
12+
function SetTimerValue()
13+
{
14+
inputHour = Number(document.getElementById("inputHour").value);
15+
inputMinute = Number(document.getElementById("inputMinute").value);
16+
inputSecond = Number(document.getElementById("inputSecond").value);
17+
}
18+
19+
function StartClock()
20+
{
21+
if(inputHour > 0 || inputMinute > 0 || inputSecond > 0)
22+
{
23+
hour.innerHTML = FormatTime(inputHour);
24+
outputContainer.style.display = "flex";
25+
startBtn.style.display = "none";
26+
stopBtn.style.display = "inline-block";
27+
stopWatch = setInterval(myClock, 1000);
28+
}
29+
}
30+
31+
function StopClock()
32+
{
33+
startBtn.style.display = "inline-block";
34+
stopBtn.style.display = "none";
35+
36+
clearInterval(stopWatch);
37+
}
38+
39+
function ResetClock()
40+
{
41+
StopClock();
42+
outputContainer.style.display = "none";
43+
document.getElementById("inputHour").value = "";
44+
document.getElementById("inputMinute").value = "";
45+
document.getElementById("inputSecond").value = "";
46+
hour.innerHTML = "00";
47+
minute.innerHTML = "00";
48+
second.innerHTML = "00";
49+
inputHour = 0;
50+
inputMinute = 0;
51+
inputSecond = 0;
52+
}
53+
54+
function myClock()
55+
{
56+
if(inputSecond <= 0)
57+
{
58+
if(inputMinute <= 0)
59+
{
60+
if(inputHour == 0 && inputMinute == 0 && inputSecond ==0)
61+
{
62+
StopClock();
63+
new Audio('./beep.mp3').play()
64+
return;
65+
}
66+
else
67+
{
68+
inputHour--;
69+
}
70+
hour.innerHTML = FormatTime(inputHour);
71+
inputMinute = 60;
72+
}
73+
inputMinute--;
74+
minute.innerHTML = FormatTime(inputMinute);
75+
inputSecond = 60;
76+
}
77+
inputSecond--;
78+
second.innerHTML = FormatTime(inputSecond);
79+
}
80+
81+
function FormatTime(time)
82+
{
83+
var formatedTime
84+
if(time < 10)
85+
{
86+
formatedTime = "0" + time.toString();
87+
}
88+
else
89+
{
90+
formatedTime = time;
91+
}
92+
return formatedTime
93+
}

0 commit comments

Comments
(0)

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