136 lines
3.8 KiB
HTML
136 lines
3.8 KiB
HTML
<html>
|
|
<meta charset="utf-8">
|
|
<title>how old am I?</title>
|
|
<style>
|
|
body{min-height:100vh;margin:0;padding:0;display:flex;
|
|
flex:column nowrap;align-items:center;background:#455;}
|
|
main{font:18px/1.23 monospace;max-width:70ch;padding:2ch;
|
|
margin:auto;border:1px solid;color:#455;background:#fee;}
|
|
.age{background:yellow;padding:4px;}
|
|
aside{position:absolute;bottom:0;right:0;background:white;}
|
|
</style>
|
|
|
|
<main>
|
|
<h1>how old am I?</h1>
|
|
<aside>cf. also <a href="age2.html">another accounting</a>,
|
|
or <a href="index.html">return</a>.</aside>
|
|
<p>well, I was born on July 25, 1990, so I am
|
|
<span class=age id="days"></span>
|
|
days old.</p>
|
|
<p>and I was born at 9:45 P.M., so I am
|
|
<span class=age id="minutes"></span>
|
|
minutes old.</p>
|
|
<p>I'm not sure what second in that minute I was born,
|
|
so I'm between
|
|
<span class=age id="secs-min"></span> and
|
|
<span class=age id="secs-max"></span> seconds old.
|
|
</p>
|
|
<h2>other fun ages:</h2>
|
|
<ul>
|
|
<li>I am
|
|
<span class=age id="weeks"></span> weeks old.</li>
|
|
<li>I am
|
|
<span class=age id="hours"></span> hours old.</li>
|
|
<li>I am
|
|
<span class=age id="months"></span> months old.</li>
|
|
</ul>
|
|
<h2>countdowns</h2>
|
|
<ul>
|
|
<li>it is
|
|
<span class=countdown id=daysTilBirthday></span>
|
|
days til my next birthday.
|
|
</li>
|
|
</ul>
|
|
</main>
|
|
<script>
|
|
let birthday = new Date(1990, 6, 25, 21, 45, 30); // 30 secs for average
|
|
|
|
let spans = {
|
|
"ages": {
|
|
"secMin": document.getElementById("secs-min"),
|
|
"secMax": document.getElementById("secs-max"),
|
|
"minute": document.getElementById("minutes"),
|
|
"hour": document.getElementById("hours"),
|
|
"day": document.getElementById("days"),
|
|
"week": document.getElementById("weeks"),
|
|
"year": document.getElementById("years"),
|
|
"month": document.getElementById("months")
|
|
}
|
|
}
|
|
|
|
let ages = {};
|
|
function updateAges(t) {
|
|
let diff = t - birthday; // milliseconds
|
|
|
|
ages["second"] = diff / 1000;
|
|
ages["secMin"] = ages["second"] - 30;
|
|
ages["secMax"] = ages["second"] + 30;
|
|
|
|
ages["minute"] = ages["second"] / 60;
|
|
ages["hour"] = ages["minute"] / 60;
|
|
ages["day"] = ages["hour"] / 24;
|
|
ages["week"] = ages["day"] / 7;
|
|
ages["year"] = ages["day"] / 365.2425;
|
|
ages["month"] = ages["year"] * 12;
|
|
|
|
rounders = { 'second': 0, 'minute': 2, 'hour': 4,
|
|
'day': 5, 'week': 6, 'year': 8, 'month': 7 };
|
|
|
|
for (let period in ages) {
|
|
let rounder = rounders[period];
|
|
if (spans.ages[period]) {
|
|
spans.ages[period].textContent
|
|
= (ages[period]).toFixed(Math.max(0,rounder));
|
|
}
|
|
}
|
|
}
|
|
|
|
let countdowns = {
|
|
'birthday': {}
|
|
};
|
|
spans.countdowns = {
|
|
'birthday': {
|
|
'day': document.getElementById("daysTilBirthday")
|
|
}
|
|
}
|
|
function updateCountdowns(t) {
|
|
let yearAdjustment = 0;
|
|
let bMonth = birthday.getMonth();
|
|
let bDate = birthday.getDate();
|
|
if (bMonth < t.getMonth() ||
|
|
(bMonth === t.getMonth() &&
|
|
bDate <= t.getDate())) {
|
|
yearAdjustment = 1;
|
|
}
|
|
let nextBirthday =
|
|
new Date(t.getFullYear() + yearAdjustment, bMonth, bDate);
|
|
|
|
let bdiff = nextBirthday - t;
|
|
countdowns.birthday["second"] = bdiff / 1000;
|
|
countdowns.birthday["minute"]
|
|
= countdowns.birthday["second"] / 60;
|
|
countdowns.birthday["hour"]
|
|
= countdowns.birthday["minute"] / 60;
|
|
countdowns.birthday["day"]
|
|
= countdowns.birthday["hour"] / 24;
|
|
countdowns.birthday["week"]
|
|
= countdowns.birthday["day"] / 7;
|
|
|
|
for (let bc in countdowns.birthday) {
|
|
if (spans.countdowns.birthday[bc]) {
|
|
spans.countdowns.birthday[bc].textContent
|
|
= (countdowns.birthday[bc]).toFixed(5);
|
|
}
|
|
}
|
|
}
|
|
|
|
function update() {
|
|
let now = new Date;
|
|
updateAges(now);
|
|
updateCountdowns(now);
|
|
}
|
|
|
|
window.onload = update
|
|
var everySecondID = window.setInterval(update, 1000);
|
|
</script>
|