202 lines
6.9 KiB
HTML
202 lines
6.9 KiB
HTML
<html>
|
|
<head>
|
|
<title>Countdown Timer</title>
|
|
<link rel="stylesheet" type="text/css" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<div class="grid-container">
|
|
<div class="grid-clock">
|
|
<table>
|
|
<th class="mainClock">Date</th><th class="mainClock">Current TZ</th><th class="mainClock">UTC</th>
|
|
<tr><td class="mainClock"><div id="calDate"></div></td><td class="mainClock"><div id="now"></div></td><td class="mainClock"><div id="utc_now"></div></td></tr>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="grid-events">
|
|
<div id="events-list"></div>
|
|
</div>
|
|
|
|
<div class="grid-main">
|
|
<div class="main">
|
|
<table class="nav"><tr>
|
|
<td class="left"><div id="currentSubject" class="upNext"></div></td>
|
|
<td class="right"><div id="countdown" class="countdown"></div></td>
|
|
</tr></table>
|
|
|
|
<div id="currentStartEnd"></div>
|
|
<div class="notesTitle"><h2>Notes</h2>
|
|
<div class="notes" id="notes"></div>
|
|
</div>
|
|
|
|
<table class="nav"><tr>
|
|
<td class="left"><div id="upNext" class="upNext"></div></td>
|
|
<td class="right"><div id="nextCountdown" class="countdown"></div></td>
|
|
</tr></table>
|
|
|
|
<div id="nextStartEnd"></div>
|
|
<table class="nav"><tr>
|
|
<td class="nav"><form class="left"><input type="button" value="Previous" onclick="decArray()"></form></td>
|
|
<td class="nav"><form class="right"><input type="button" value="Next" onclick="incArray()"></form></td>
|
|
</tr></table>
|
|
|
|
<div id="debug" class="debug"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="events.js"></script>
|
|
<script src="timerMath.js"></script>
|
|
<script src="clock.js"></script>
|
|
|
|
<script>
|
|
var version = "0.8.019"
|
|
var debug = true;
|
|
|
|
var style = 'green';
|
|
var eventStyle = "events";
|
|
var list;
|
|
var counter_diff;
|
|
|
|
var eventsLength = events.length;
|
|
|
|
var array_counter = 0;
|
|
var currentObject = array_counter;
|
|
var nextObject = array_counter + 1;
|
|
|
|
var notes = events[currentObject].notes;
|
|
var currentDate = events[currentObject].date;
|
|
var nextDate = events[nextObject].date;
|
|
var currentStart = currentDate;
|
|
var currentEnd = nextDate;
|
|
var nextStart = nextDate;
|
|
var nextEnd = events[(nextObject + 1)].date;
|
|
var currentSubject = events[currentObject].subject;
|
|
var nextSubject = events[nextObject].subject;
|
|
|
|
// Set the date we're counting down to
|
|
var countDownDate = new Date(nextDate).getTime();
|
|
var currentTimer = new Date(currentDate).getTime();
|
|
|
|
document.getElementById("notes").innerHTML = notes;
|
|
document.getElementById("currentSubject").innerHTML = "<div class=upNext>Now: " + currentSubject + "</div>";
|
|
document.getElementById("upNext").innerHTML = "<div class=upNext>Next: " + nextSubject + "</div>";
|
|
document.getElementById("currentStartEnd").innerHTML = "Start Time: " + currentDate + "<br />End Time: " + currentEnd;
|
|
document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "<br />End Time: " + nextEnd;
|
|
|
|
function incArray() {
|
|
if (array_counter < eventsLength) {
|
|
array_counter++;
|
|
}
|
|
currentObject = array_counter;
|
|
currentDate = events[currentObject].date;
|
|
currentSubject = events[currentObject].subject;
|
|
currentStart = currentDate;
|
|
currentEnd = nextDate;
|
|
nextStart = nextDate;
|
|
nextEnd = events[(nextObject + 1)].date;
|
|
|
|
nextObject = array_counter + 1;
|
|
nextDate = events[nextObject].date;
|
|
nextSubject = events[nextObject].subject;
|
|
notes = events[currentObject].notes;
|
|
|
|
document.getElementById("notes").innerHTML = notes;
|
|
document.getElementById("currentSubject").innerHTML = "<div class=upNext>Now: " + currentSubject + "</div>";
|
|
document.getElementById("upNext").innerHTML = "<div class=upNext>Next: " + nextSubject + "</div>";
|
|
document.getElementById("currentStartEnd").innerHTML = "Start Time: " + currentDate + "<br />End Time: " + currentEnd;
|
|
document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "<br />End Time: " + nextEnd;
|
|
countDownDate = new Date(nextDate).getTime();
|
|
currentTimer = new Date(currentDate).getTime();
|
|
}
|
|
|
|
function decArray() {
|
|
if (array_counter > 0) {
|
|
array_counter--;
|
|
}
|
|
|
|
currentObject = array_counter;
|
|
nextObject = array_counter + 1;
|
|
currentDate = events[currentObject].date;
|
|
nextDate = events[nextObject].date;
|
|
currentSubject = events[currentObject].subject;
|
|
nextSubject = events[nextObject].subject;
|
|
currentStart = currentDate;
|
|
currentEnd = nextDate;
|
|
nextStart = nextDate;
|
|
nextEnd = events[(nextObject + 1)].date;
|
|
notes = events[currentObject].notes;
|
|
|
|
nextObject = array_counter + 1;
|
|
nextDate = events[nextObject].date;
|
|
nextSubject = events[nextObject].subject;
|
|
|
|
document.getElementById("notes").innerHTML = notes;
|
|
document.getElementById("currentSubject").innerHTML = "<div class=upNext>Now: " + currentSubject + "</div>";
|
|
document.getElementById("upNext").innerHTML = "<div class=upNext>Next: " + nextSubject + "</div>";
|
|
document.getElementById("currentStartEnd").innerHTML = "Start Time: " + currentDate + "<br />End Time: " + currentEnd;
|
|
document.getElementById("nextStartEnd").innerHTML = "Start Time: " + nextDate + "<br />End Time: " + nextEnd;
|
|
countDownDate = new Date(nextDate).getTime();
|
|
currentTimer = new Date(currentDate).getTime();
|
|
}
|
|
|
|
|
|
// Update the count down every 1 second
|
|
var x = setInterval(function() {
|
|
|
|
list = "<table class=events><th class=events>Event</th><th class=events>Time</th><th class=events>Time Until</th>";
|
|
|
|
|
|
if (aLen > 30) {
|
|
var listLength = 30;
|
|
} else {
|
|
var listLength = aLen;
|
|
}
|
|
|
|
for (i = 0; i < listLength; i++) {
|
|
if (i === array_counter) {
|
|
eventStyle= "events-current";
|
|
} else {
|
|
eventStyle = "events";
|
|
}
|
|
|
|
counter_diff = i - array_counter;
|
|
|
|
if (counter_diff < -2) {
|
|
list += '';
|
|
} else {
|
|
list += "<tr><td class=" + eventStyle + ">" + events[i].subject + "</td><td class=" + eventStyle + ">" + events[i].date + "</td><td class=" + eventStyle + ">" + countdown(events[i].date) + "</td></tr>";
|
|
}
|
|
}
|
|
|
|
list += "</table>";
|
|
document.getElementById("events-list").innerHTML = list;
|
|
|
|
// A regular clock
|
|
var cal_date = clock_cal_date();
|
|
var clock = clock_date();
|
|
var clockUTC = clock_dateUTC();
|
|
|
|
document.getElementById("calDate").innerHTML = cal_date;
|
|
document.getElementById("now").innerHTML = clock;
|
|
document.getElementById("utc_now").innerHTML = clockUTC;
|
|
|
|
//
|
|
document.getElementById("countdown").innerHTML = countdown(currentDate);
|
|
document.getElementById("nextCountdown").innerHTML = countdown(nextDate);
|
|
|
|
if (debug == true) {
|
|
document.getElementById("debug").innerHTML = "debug: " + debug + "<br />Version: " + version + "<br />Current time object: " + currentDate + "<br />Current subject object: " + currentSubject + "<br />current notes object: " + notes + "<br />next time object: " + nextDate + "<br />next subject object: " + nextSubject + "<br />current array counter: " + array_counter + "<br />Start Time: " + currentStart + "<br />End Time: " + currentEnd + "<br />" ;
|
|
}
|
|
|
|
// If the count down is finished, write some text
|
|
//if (distance < 0) {
|
|
// clearInterval(x);
|
|
// document.getElementById("clock").innerHTML = "EXPIRED";
|
|
//}
|
|
}, 1000);
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|