Skip to content

Commit 7026cef

Browse files
billyfossbillyfoss
committed
Create multicountdown.html
copy of countdown before removing extra function
1 parent cb1988e commit 7026cef

File tree

1 file changed

+265
-0
lines changed

1 file changed

+265
-0
lines changed

‎js-timers/multicountdown.html‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
2+
3+
<html>
4+
5+
<head>
6+
<title>Retreat Timer</title>
7+
<style type="text/css">
8+
9+
body
10+
{
11+
background-color:#b0c4de;
12+
}
13+
14+
div.timer
15+
{
16+
text-align:center;
17+
font-size:200px;
18+
font-weight:bold;
19+
font-family:Arial,Helvetica,sans-serif;
20+
color:green;
21+
}
22+
23+
p.green
24+
{
25+
text-align:center;
26+
font-size:200px;
27+
font-weight:bold;
28+
font-family:Arial,Helvetica,sans-serif;
29+
color:green;
30+
}
31+
32+
p.warn
33+
{
34+
text-align:center;
35+
font-size:200px;
36+
font-weight:bold;
37+
font-family:Arial,Helvetica,sans-serif;
38+
color:yellow;
39+
}
40+
41+
p.stop
42+
{
43+
text-align:center;
44+
font-size:200px;
45+
font-weight:bold;
46+
font-family:Arial,Helvetica,sans-serif;
47+
color:red;
48+
}
49+
50+
p.debug
51+
{
52+
text-align:center;
53+
font-size:20px;
54+
font-weight:bold;
55+
font-family:Arial,Helvetica,sans-serif;
56+
color:blue;
57+
visibility:visible;
58+
}
59+
60+
61+
table,td,th
62+
{
63+
}
64+
table
65+
{
66+
width:100%;
67+
}
68+
th
69+
{
70+
height:600px;
71+
}
72+
73+
</style>
74+
75+
</head>
76+
77+
<body onLoad="" onUnload="clearIntterval(int)">
78+
79+
<script language=javascript>
80+
<!--
81+
82+
// Units conversion
83+
var millisecondsPerSecond = 1000;
84+
var millisecondsPerMinute = 1000 * 60;
85+
var millisecondsPerHour = 1000 * 60 * 60;
86+
var millisecondsPerDay = 1000 * 60 * 60 * 24;
87+
88+
89+
// Parameters
90+
var timerMin = 45;
91+
var timerStop = (timerMin * 60 * millisecondsPerSecond);
92+
var timerWarn = (Math.ceil(timerMin * 0.10) * 60 * millisecondsPerSecond);
93+
var timerRes = (1 * 60 * millisecondsPerSecond);
94+
var pollInterval = (1 * millisecondsPerSecond);
95+
96+
97+
// Color reference
98+
// black = "#000000";
99+
// blue = "#0000FF";
100+
// green = "#00FF00";
101+
// yellow = "#FFFF00";
102+
// red = "#FF0000";
103+
104+
105+
function changeBackground(color){
106+
document.bgColor = color;
107+
}
108+
109+
function updateClock()
110+
{
111+
var d=new Date();
112+
var t=d.toLocaleTimeString();
113+
document.getElementById("clock").innerHTML = t;
114+
}
115+
116+
var clockRunning=false;
117+
var clockInterval=0;
118+
function toggleClock()
119+
{
120+
if (clockRunning == false) {
121+
clockInterval = setInterval('updateClock()', pollInterval);
122+
clockRunning = true;
123+
} else {
124+
clockInterval = clearInterval(clockInterval);
125+
clockRunning = false;
126+
}
127+
// Debugging
128+
document.getElementById("clockstatus").innerHTML = "clock " + clockRunning;
129+
}
130+
131+
132+
133+
function updateTimer()
134+
{
135+
var d=new Date();
136+
var t=d.toLocaleTimeString();
137+
document.getElementById("timer").innerHTML = t;
138+
}
139+
140+
141+
var timerRunning=false;
142+
var timerInterval=0;
143+
function toggleTimer()
144+
{
145+
if (timerRunning == false) {
146+
timerInterval = setInterval('updateTimer()', pollInterval);
147+
timerRunning = true;
148+
} else {
149+
timerInterval = clearInterval(timerInterval);
150+
timerRunning = false;
151+
}
152+
// Debugging
153+
document.getElementById("timerstatus").innerHTML = "timer " + timerRunning;
154+
}
155+
156+
157+
//var currentTime = new Date();
158+
var endTime;
159+
var remainingTime = timerStop;
160+
function updateCountdown()
161+
{
162+
//currentTime = new Date();
163+
if (endTime == "") {
164+
// Initialize end time
165+
endTime = new Date((new Date()).getTime() + timerStop);
166+
}
167+
remainingTime = endTime.getTime() - (new Date()).getTime();
168+
169+
// Normalize with timerRes
170+
var displayTime = Math.round(remainingTime / timerRes) * timerRes;
171+
172+
if ( displayTime < 0 ) {
173+
document.getElementById("countdown").className = "stop";
174+
displayTime = Math.abs(displayTime);
175+
} else if ( displayTime <= timerWarn ) {
176+
document.getElementById("countdown").className = "warn";
177+
}
178+
179+
var result = "";
180+
var secs = displayTime/1000;
181+
182+
var months = Math.floor(secs/(30 * 24 * 3600));
183+
secs = secs % (30 * 24 * 3600);
184+
if(months > 0) result += months + "months ";
185+
186+
var weeks = Math.floor(secs/(7 * 24 * 3600));
187+
secs = secs % (7 * 24 * 3600);
188+
if(weeks > 0) result += weeks + "weeks ";
189+
190+
var days = Math.floor(secs/(24 * 3600));
191+
secs = secs % (24 * 3600);
192+
if(days > 0) result += days + "days ";
193+
194+
var hours = Math.floor(secs/3600);
195+
secs = secs % 3600;
196+
197+
if(hours < 10) result += " ";
198+
if(hours > 0) result += hours + ":";
199+
200+
var minutes = Math.floor(secs/60);
201+
secs = secs % 60;
202+
if(minutes < 10) result += " ";
203+
if(minutes >= 0) result += minutes + ":";
204+
205+
if(Math.round(secs) < 10) result += "0";
206+
if(Math.round(secs) >= 0) result += Math.round(secs) + "";
207+
208+
209+
document.getElementById("countdown").innerHTML = result;
210+
}
211+
212+
213+
var countdownRunning=false;
214+
var countdownInterval=0;
215+
function toggleCountdown()
216+
{
217+
if (countdownRunning == false) {
218+
countdownInterval = setInterval('updateCountdown()', pollInterval);
219+
countdownRunning = true;
220+
221+
// Push end time out by remaining time
222+
endTime = new Date(new Date().getTime() + remainingTime);
223+
} else {
224+
countdownInterval = clearInterval(countdownInterval);
225+
countdownRunning = false;
226+
// Save remaining time
227+
remainingTime = endTime.getTime() - new Date().getTime();
228+
}
229+
// Debugging
230+
document.getElementById("countdownstatus").innerHTML = "countdown " + countdownRunning + " timerStop " + timerStop + " timerWarn " + timerWarn + " endTime " + endTime + " remainingTime " + remainingTime;
231+
}
232+
233+
234+
235+
236+
237+
238+
//-->
239+
240+
241+
</script>
242+
243+
244+
245+
<table>
246+
<tr>
247+
<th>
248+
<!--
249+
<p class="green" id="timer" onclick="toggleTimer();">start timer</p>
250+
<p class="timerstatus" id="timerstatus">status</p>
251+
252+
<p class="green" id="clock" onclick="updateClock();toggleClock()">display clock</p>
253+
<p class="clockstatus" id="clockstatus">clock status</p>
254+
-->
255+
<p class="green" id="countdown" onclick="toggleCountdown()">start</p>
256+
<!--
257+
<p class="debug" id="countdownstatus">countdown status</p>
258+
-->
259+
260+
</th>
261+
</tr>
262+
</table>
263+
</body>
264+
</html>
265+

0 commit comments

Comments
 (0)