broadcast_timer
This commit is contained in:
Kameron Kenny
parent
f3e0677ac7
commit
7473809ccc
|
|
@ -0,0 +1,52 @@
|
|||
var d = new Date();
|
||||
|
||||
function clock_cal_date() {
|
||||
var r = d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate();
|
||||
return r
|
||||
}
|
||||
|
||||
function clock_date() {
|
||||
|
||||
// A regular clock
|
||||
|
||||
var hour = d.getHours();
|
||||
var minute = d.getMinutes();
|
||||
var second = d.getSeconds();
|
||||
|
||||
if (hour < 10 && hour >= 0) {
|
||||
hour = ('0' + hour);
|
||||
}
|
||||
|
||||
if (minute < 10 && minute >= 0) {
|
||||
minute = ('0' + minute);
|
||||
}
|
||||
|
||||
if (second < 10 && second >= 0) {
|
||||
second = ('0' + second);
|
||||
}
|
||||
|
||||
var r = hour + ":" + minute + ":" + second;
|
||||
return r;
|
||||
}
|
||||
|
||||
function clock_dateUTC() {
|
||||
// Same for UTC
|
||||
var hourUTC = d.getUTCHours();
|
||||
var minuteUTC = d.getUTCMinutes();
|
||||
var secondUTC = d.getUTCSeconds();
|
||||
|
||||
if (hourUTC < 10) {
|
||||
hourUTC = ('0' + hourUTC);
|
||||
}
|
||||
|
||||
if (minuteUTC < 10) {
|
||||
minuteUTC = ('0' + minuteUTC);
|
||||
}
|
||||
|
||||
if (secondUTC < 10) {
|
||||
secondUTC = ('0' + secondUTC);
|
||||
}
|
||||
|
||||
var r = hourUTC + ":" + minuteUTC + ":" + secondUTC;
|
||||
return r
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
var events = [
|
||||
{
|
||||
"date": "May 23, 2019 16:00:00",
|
||||
"subject": "start",
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"date": "May 24, 2019 15:00:00",
|
||||
"subject": "Example 1",
|
||||
"notes": "EXMAMPLE 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur purus ut faucibus pulvinar elementum. Pellentesque habitant morbi tristique senectus et. Amet risus nullam eget felis. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam."
|
||||
},
|
||||
{
|
||||
"date": "May 24, 2019 15:33:00",
|
||||
"subject": "Example 2",
|
||||
"notes": "EXAMPLE 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur purus ut faucibus pulvinar elementum. Pellentesque habitant morbi tristique senectus et. Amet risus nullam eget felis. Semper auctor neque vitae tempus quam pellentesque nec nam aliquam."
|
||||
},
|
||||
{
|
||||
"date": "May 24, 2020 15:33:00",
|
||||
"subject": "END",
|
||||
"notes": ""
|
||||
}
|
||||
|
||||
]
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<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.6.017"
|
||||
var debug = true;
|
||||
|
||||
var style = 'green';
|
||||
var eventStyle = "events";
|
||||
var list;
|
||||
|
||||
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>";
|
||||
|
||||
for (i = 0; i < aLen; i++) {
|
||||
|
||||
if (i === array_counter) {
|
||||
eventStyle= "events-current";
|
||||
} else {
|
||||
eventStyle = "events";
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
body { background-color: #333; color: #fff;}
|
||||
th { color: #FFF; font-size: 28px; }
|
||||
table { border-collapse: collapse; }
|
||||
table, th, td { border: 0px solid #999; padding: 0px; padding-top: 0px; padding-bottom: 0px; }
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'clock main main main main main'
|
||||
'events main main main main main'
|
||||
'events main main main main main';
|
||||
grid-gap: 3px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.grid-main {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
.grid-clock {
|
||||
grid-area: clock;
|
||||
border: 1px solid #AAA;
|
||||
}
|
||||
|
||||
.grid-events {
|
||||
grid-area: events;
|
||||
}
|
||||
|
||||
.main {
|
||||
background-color: #222;
|
||||
position: center;
|
||||
/* margin: auto; */
|
||||
}
|
||||
|
||||
.mainClock {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
border: 1px solid #999;
|
||||
padding: 15px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.events {
|
||||
/* border: 1px solid #DDD; */
|
||||
padding: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.events-current {
|
||||
background-color: #666;
|
||||
/* border: 1px solid #DDD; */
|
||||
padding: 2px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
th.events {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
table.events {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.countdown { text-align: right; font-size: 60px; }
|
||||
.warn { color: yellow; }
|
||||
.over { color: red; }
|
||||
.green { color: lime; }
|
||||
#now { color: #FFF; font-size: 20px; }
|
||||
#utc_now { color: #FFF; font-size: 20px; }
|
||||
.debug { background-color: #000; color: lime; border: 2px; border-color: lime; }
|
||||
.notes { background-color: #000; color: #AAA; width: 100%; min-height: 400px;}
|
||||
.notesTitle { background-color: #000; color: #AAA; width: 100%; font-size: 20px;}
|
||||
|
||||
.right { text-align: right; border: 0px;}
|
||||
.left { text-align: left; border: 0px; }
|
||||
.nav { border: 0px; width: 100%; padding:0px; }
|
||||
.upNext { color: #fff; font-size: 45px; }
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
|
||||
var countDownDate;
|
||||
var now, distance;
|
||||
var days, hours, minutes, seconds;
|
||||
var style = "green"; // reset style
|
||||
var r;
|
||||
aLen = events.length;
|
||||
|
||||
function countdown(targetDate) {
|
||||
|
||||
countDownDate = new Date(targetDate).getTime();
|
||||
now = new Date().getTime();
|
||||
distance = countDownDate - now;
|
||||
|
||||
|
||||
days = Math.floor(distance / (1000 * 60 * 60 * 24));
|
||||
hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
|
||||
minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
|
||||
seconds = Math.floor((distance % (1000 * 60)) / 1000);
|
||||
|
||||
|
||||
// Day or Days?
|
||||
if (days > 0) {
|
||||
if (days == 1){
|
||||
days = (days + ' Day ');
|
||||
} else {
|
||||
days = (days + ' Days ');
|
||||
}
|
||||
} else {
|
||||
days = '';
|
||||
}
|
||||
|
||||
// set style for countdown based on remaining time
|
||||
style = "green"; // reset style
|
||||
|
||||
if (days < 1 && hours < 1) {
|
||||
//console.log(`in days and hours if statment`)
|
||||
//console.log(`days = ${days} , hours = ${hours} , minutes = ${minutes}`)
|
||||
if (minutes < 0) {
|
||||
style = 'over';
|
||||
} else if (minutes < 15) {
|
||||
style = 'warn';
|
||||
} else {
|
||||
style = 'green';
|
||||
}
|
||||
}
|
||||
|
||||
//console.log(`Style = ${style}`)
|
||||
|
||||
// pad single digits with a '0' prefix
|
||||
// when time is out, start counting up by inverting
|
||||
if (hours < 0) {
|
||||
hours = (-hours);
|
||||
}
|
||||
if (hours < 10 && hours >= 0) {
|
||||
hours = ('0' + hours);
|
||||
}
|
||||
|
||||
if (minutes < 0) {
|
||||
minutes = (-minutes);
|
||||
}
|
||||
if (minutes < 10 && minutes >= 0) {
|
||||
minutes = ('0' + minutes);
|
||||
}
|
||||
|
||||
if (seconds < 0) {
|
||||
seconds = (-seconds);
|
||||
}
|
||||
if (seconds < 10 && seconds >= 0) {
|
||||
seconds = ('0' + seconds);
|
||||
}
|
||||
|
||||
var r = "<div class=" + style + ">" + days + hours + ":" + minutes + ":" + seconds + "</div>";
|
||||
|
||||
return r;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue