Add eternalseptember.
This commit is contained in:
parent
a50576757b
commit
7e20d7abd2
3 changed files with 164 additions and 0 deletions
41
voussoir.net/eternalseptember/eternalseptember.html
Normal file
41
voussoir.net/eternalseptember/eternalseptember.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<html>
|
||||
<head>
|
||||
<title class="eternalseptember_clock" data-eternalseptember-strftime="%Y-%m-%d">eternalseptember</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<link rel="stylesheet" href="/static/common.css">
|
||||
|
||||
<style>
|
||||
*, *:before, *:after
|
||||
{
|
||||
box-sizing: inherit;
|
||||
}
|
||||
html, body
|
||||
{
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body
|
||||
{
|
||||
display: grid;
|
||||
background-color: #0e0e0d;
|
||||
}
|
||||
#the_clock
|
||||
{
|
||||
color: #ddd;
|
||||
font-size: 32pt;
|
||||
justify-self: center;
|
||||
align-self: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<center id="the_clock" class="eternalseptember_clock" data-eternalseptember-strftime="%A, %B %d, %Y %I:%M:%S %p" data-eternalseptember-tickrate="1000"></center>
|
||||
</body>
|
||||
|
||||
|
||||
<script src="/eternalseptember/eternalseptember.js" type="text/javascript"></script>
|
||||
</html>
|
||||
121
voussoir.net/eternalseptember/eternalseptember.js
Normal file
121
voussoir.net/eternalseptember/eternalseptember.js
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
const eternalseptember = {};
|
||||
|
||||
eternalseptember.EPOCH = new Date("1993-09-01T00:00:00");
|
||||
|
||||
eternalseptember.AM_PM = ["AM", "PM"];
|
||||
eternalseptember.WEEKDAY_NAMES = [
|
||||
"Sunday",
|
||||
"Monday",
|
||||
"Tuesday",
|
||||
"Wednesday",
|
||||
"Thursday",
|
||||
"Friday",
|
||||
"Saturday",
|
||||
]
|
||||
eternalseptember.WEEKDAY_ABBREVS = [
|
||||
"Sun",
|
||||
"Mon",
|
||||
"Tue",
|
||||
"Wed",
|
||||
"Thu",
|
||||
"Fri",
|
||||
"Sat",
|
||||
]
|
||||
eternalseptember.MONTH_NAMES = [
|
||||
"January",
|
||||
"February",
|
||||
"March",
|
||||
"April",
|
||||
"May",
|
||||
"June",
|
||||
"July",
|
||||
"August",
|
||||
"September",
|
||||
"October",
|
||||
"November",
|
||||
"December",
|
||||
]
|
||||
|
||||
eternalseptember.twelvehour =
|
||||
function twelvehour(hour)
|
||||
{
|
||||
hour = parseInt(hour % 12);
|
||||
if (hour === 0)
|
||||
{
|
||||
return 12;
|
||||
}
|
||||
return hour;
|
||||
}
|
||||
eternalseptember.strftime =
|
||||
function strftime(date, format)
|
||||
{
|
||||
const diff = date - eternalseptember.EPOCH;
|
||||
const diff_days = parseInt(diff / (1000*60*60*24));
|
||||
|
||||
const day_of_month = diff_days + 1
|
||||
const day_of_year = diff_days + 244
|
||||
|
||||
let result = format;
|
||||
result = result.replace(/(?<!%)%b/, 'Sep');
|
||||
result = result.replace(/(?<!%)%B/, 'September');
|
||||
result = result.replace(/(?<!%)%d/, day_of_month);
|
||||
result = result.replace(/(?<!%)%-d/, day_of_month);
|
||||
result = result.replace(/(?<!%)%j/, day_of_year);
|
||||
result = result.replace(/(?<!%)%-j/, day_of_year);
|
||||
result = result.replace(/(?<!%)%m/, '09');
|
||||
result = result.replace(/(?<!%)%-m/, '9');
|
||||
result = result.replace(/(?<!%)%Y/, '1993');
|
||||
result = result.replace(/(?<!%)%y/, '93');
|
||||
|
||||
result = result.replace(/(?<!%)%A/, eternalseptember.WEEKDAY_NAMES[date.getDay()]);
|
||||
result = result.replace(/(?<!%)%a/, eternalseptember.WEEKDAY_ABBREVS[date.getDay()]);
|
||||
|
||||
result = result.replace(/(?<!%)%w/, date.getDay());
|
||||
result = result.replace(/(?<!%)%H/, String(date.getHours()).padStart(2, "0"));
|
||||
result = result.replace(/(?<!%)%-H/, date.getHours());
|
||||
result = result.replace(/(?<!%)%I/, String(eternalseptember.twelvehour(date.getHours())).padStart(2, "0"));
|
||||
result = result.replace(/(?<!%)%-I/, eternalseptember.twelvehour(date.getHours()));
|
||||
result = result.replace(/(?<!%)%M/, String(date.getMinutes()).padStart(2, "0"));
|
||||
result = result.replace(/(?<!%)%-M/, date.getMinutes());
|
||||
result = result.replace(/(?<!%)%S/, String(date.getSeconds()).padStart(2, "0"));
|
||||
result = result.replace(/(?<!%)%-S/, date.getSeconds());
|
||||
|
||||
result = result.replace(/(?<!%)%p/, eternalseptember.AM_PM[+(date.getHours() > 12)]);
|
||||
return result;
|
||||
}
|
||||
|
||||
eternalseptember.init_clock =
|
||||
function init_clock(clock)
|
||||
{
|
||||
const format = clock.dataset.eternalseptemberStrftime;
|
||||
if (clock.dataset.eternalseptemberTickrate === undefined)
|
||||
{
|
||||
clock.innerText = eternalseptember.strftime(new Date(), format);
|
||||
return;
|
||||
}
|
||||
|
||||
const tickrate = parseInt(clock.dataset.eternalseptemberTickrate);
|
||||
const ticktock = function ticktock()
|
||||
{
|
||||
clock.innerText = eternalseptember.strftime(new Date(), format);
|
||||
setTimeout(ticktock, tickrate);
|
||||
}
|
||||
ticktock();
|
||||
}
|
||||
|
||||
eternalseptember.init_clocks =
|
||||
function init_clocks()
|
||||
{
|
||||
const clocks = Array.from(document.getElementsByClassName("eternalseptember_clock"));
|
||||
for (const clock of clocks)
|
||||
{
|
||||
eternalseptember.init_clock(clock);
|
||||
}
|
||||
}
|
||||
|
||||
eternalseptember.on_pageload =
|
||||
function on_pageload()
|
||||
{
|
||||
eternalseptember.init_clocks();
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", eternalseptember.on_pageload);
|
||||
|
|
@ -393,6 +393,8 @@ code { font-family: monospace; }
|
|||
<p><a href="https://trac.ffmpeg.org/wiki/SubmitALogo">FFmpeg logo</a></p>
|
||||
<p><a href="https://git-scm.com/downloads/logos">Git logo</a></p>
|
||||
<p>Derivative artwork based on <a href="https://www.redditinc.com/brand">Reddit's</a> classic Snoo mascot</p>
|
||||
<center class="eternalseptember_clock" data-eternalseptember-strftime="%A, %B %d, %Y"></center>
|
||||
<script src="/eternalseptember/eternalseptember.js"></script>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue