Beispiel:JS Date-Osterformel.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>Osterformel live</title>
<script>
'use strict';
document.addEventListener("DOMContentLoaded", function () {
const jahrInput = document.querySelector("#jahr");
jahrInput.valueAsNumber = (new Date()).getFullYear();
jahrInput.addEventListener("change", function (event) {
calcEaster(jahrInput.valueAsNumber);
});
calcEaster(jahrInput.valueAsNumber);
// Helper
function div(a, b) {
return Math.floor(a / b);
}
function marchDate(day) {
return day > 31 ? `${day-31}. April` : `${day}. März`
}
// Computus Paschalis
function calcEaster(X) {
// Gaußsche Osterformel, mit Anpassungen von Kinkelin und Lichtenberg
const K = div(X, 100);
// Sonnenschaltung: 2 - (Anz Jahrhunderte, die kein Schaltjahr waren)
const S = 2 - div(3 * K + 3, 4);
// Mondschaltung: Offset im Meton-Zyklus
const M = 15 + div(3 * K + 3, 4) - div(8 * K + 13, 25);
// Jahr im Meton-Zyklus (Mondparameter)
const A = X % 19;
// Wie viele Tage liegt der Vollmond hinter dem Frühjahrsanfang
const D = (19 * A + M) % 30;
// seed=29: 1 Tag zurück
// seed=28 und ab A=11 im Mondzyklus: ebenfalls 1 Tag zurück
// R ist 1, wenn man 1 Tag zurück muss, sonst 0
const R = (D == 29 || (D == 28 && A > 10)) ? 1 : 0;
// Wahrer Ostertag ab Frühlingsvollmond
const OG = 21 + D - R;
// Ostertag auf den nächsten Sonntag verschieben (hierin steckt die Schaltjahrformel!)
const SZ = 7 - (X + div(X, 4) + S) % 7;
const OE = 7 - (OG - SZ) % 7;
const OS = OG + OE;
document.querySelector("#secular").textContent = K;
document.querySelector("#secSun").textContent = S;
document.querySelector("#secMoon").textContent = M;
document.querySelector("#moonParm").textContent = A;
document.querySelector("#moonSeed").textContent = D;
document.querySelector("#calFix").textContent = R;
document.querySelector("#easterLimit").textContent = OG + " (" + marchDate(OG) + ")";
document.querySelector("#firstMarchSun")
.textContent = SZ;
document.querySelector("#easterOffset")
.textContent = OE;
document.querySelector("#easterMarch")
.textContent = OS;
document.querySelector("#easterDate")
.textContent = marchDate(OS);
}
});
</script>
<style>
#computus {
margin-top:1em;
border-collapse: collapse;
}
th, td {
border: thin solid black;
padding: 0.2em 0.5em;
}
#computus th:nth-child(1),
#computus td:nth-child(1) {
text-align: right;
}
#computus th:nth-child(2) {
text-align: left;
}
#computus td:nth-child(2) {
font-family: monospace;
white-space: pre;
}
#computus th:nth-child(3),
#computus td:nth-child(3) {
text-align: left;
width: 8em;
}
</style>
</head>
<body>
<h1>Live-Osterformel (gregorianisch)</h1>
<label for="jahr">Jahr: </label><input type="number" id="jahr" step="1" value="2024">
<table id="computus">
<tr><th>Variable</th><th>Formel (X = Jahr)</th><th>Wert</th></tr>
<tr>
<th>Säkularzahl</th>
<td>K = Math.floor(X/100);</td>
<td id="secular"></td>
</tr><tr>
<th>Sonnenschaltung</th>
<td>S = 2 - Math.floor((3*K + 3) / 4);</td>
<td id="secSun"></td>
</tr><tr>
<th>Mondschaltung</th>
<td>M = 15 + Math.floor((3*K + 3) / 4)
- Math.floor((8*K + 13) / 25)</td>
<td id="secMoon"></td>
</tr>
<tr>
<th>Mondparameter</th>
<td>A = X % 19;</td>
<td id="moonParm"></td>
</tr><tr>
<th>Vollmondkeim</th>
<td>D = (19 * A + M) % 30;</td>
<td id="moonSeed"></td>
</tr>
<tr>
<th>Korrekturwert</th>
<td>R = (D==29 || (D==28 && A>10)) ? 1 : 0</td>
<td id="calFix"></td>
</tr><tr>
<th>Ostergrenze</th>
<td>OG = 21 + D - R</td>
<td id="easterLimit"></td>
</tr><tr>
<th>1. Märzsonntag</th>
<td>SZ = 7 - (X + Math.floor(X/4) + S) % 7;</td>
<td id="firstMarchSun"></td>
</tr><tr>
<th>Osteroffset</th>
<td>OE = 7 - (OG - SZ) % 7;</td>
<td id="easterOffset"></td>
</tr><tr>
<th>Ostertag (März)</th>
<td>OS = OG + OE;</td>
<td id="easterMarch"></td>
</tr><tr>
<th>Osterdatum</th>
<td></td>
<td id="easterDate"></td>
</tr>
</table>
</body>
</html>
