Skip to content

Instantly share code, notes, and snippets.

@moonexpr

moonexpr/countdown.html

Last active April 5, 2021 18:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save moonexpr/72c74d83a67354acd4c04e012421c885 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save moonexpr/72c74d83a67354acd4c04e012421c885 to your computer and use it in GitHub Desktop.
Download ZIP
Basic JS countdown
Raw
countdown.html
<!DOCTYPE html>
<html>
<head>
<title>Countdown</title>
<meta charset="UTF-8">
<meta
http-equiv="Cache-Control"
content="no-cache, no-store, must-revalidate"
/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="./countdown.js"></script>
<style>
.time > ol {
list-style: none;
padding: 0;
font-size: 0;
}
.time > ol > li#m:before,
.time > ol > li#s:before
{
content: ':';
}
.time > ol > li#ms:before
{
content: '.';
}
.time > ol > li {
display: inline;
font-size: initial;
}
</style>
</head>
<body>
<nav>
<section class="time">
<ol id="t">
<li id="d"></li>
<li id="h"></li>
<li id="m"></li>
<li id="s"></li>
<li id="ms"></li>
</ol>
</section>
<section class="time-expired">
</section>
</nav>
<main role="main">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/PuMz4v5PYKc"
title="YouTube video"
frameborder="0"
allow="autoplay; encrypted-media; gyroscope"
allowfullscreen
></iframe>
</main>
</body>
</html>
Raw
countdown.js
/* April 7th, 12pm (CST) */
const TIMER_END = new Date('2020-04-07T17:00:00.000Z');
function dom_time_elements()
{
return {
// days: $('#t #d'),
hours: $('#t #h'),
minutes: $('#t #m'),
seconds: $('#t #s'),
miseconds: $('#t #ms')
};
}
function util_time_remaining(misecDiff)
{
const UNIT_SECOND = 1000;
const UNIT_MINUTE = UNIT_SECOND * 60;
const UNIT_HOUR = UNIT_MINUTE * 60;
const UNIT_DAY = UNIT_HOUR * 24;
const fl = (num, mod) => Math.floor(num) % mod;
return {
// days: fl(misecDiff / UNIT_DAY, 1),
hours: fl(misecDiff / UNIT_HOUR, 24),
minutes: fl(misecDiff / UNIT_MINUTE, 60),
seconds: fl(misecDiff / UNIT_SECOND, 60),
miseconds: fl(misecDiff, 1000)
};
}
function co_render_expired(misecDiff, dCtrl)
{
// Drop our timer DOM
$('.time #t').remove();
// Load content from another page?
// I dunno what we're doin.
$('.time-expired').load('./countdown_expired.html');
}
function co_render_normal(misecDiff, dCtrl)
{
const remain = util_time_remaining(misecDiff);
for (const key in dCtrl)
{
dCtrl[key].text(remain[key]);
}
}
let bMutex = false;
function co_update_time(dCtrl, timer)
{
if (bMutex) return;
bMutex = true;
const misecDiff = TIMER_END - new Date();
if (misecDiff <= 0) {
if (timer) clearInterval(timer);
co_render_expired(misecDiff, dCtrl);
return;
}
co_render_normal(misecDiff, dCtrl)
bMutex = false;
}
function co_create_thread(dCtrl)
{
return () => { co_update_time(dCtrl); }
}
function main() {
const dCtrl = dom_time_elements();
let timer;
// Pop this off of the main thread.
timer = setInterval(co_create_thread(dCtrl, timer), 3);
}
$(window).on('load', main);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment