catalogusnotitie: 11 JAN. 2026
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Datum en Tijd</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* Volledige hoogte voor centrering */
background: transparent; /* Transparante achtergrond */
}
#container {
text-align: center;
color: white;
}
#date {
font-size: 72pt;
font-weight: bold;
}
#time {
font-size: 30pt;
font-weight: bold;
}
</style>
</head>
<body>
<div id="container">
<div id="date"></div>
<div id="time"></div>
</div>
<script>
const MONTHS_NL_3 = ['JAN.', 'FEB.', 'MRT.', 'APR.', 'MEI.', 'JUN.', 'JUL.', 'AUG.', 'SEP.', 'OKT.', 'NOV.', 'DEC.'];
function pad2(n) {
return String(n).padStart(2, '0');
}
function renderClock() {
const now = new Date();
const day = now.getDate();
const month = MONTHS_NL_3[now.getMonth()];
const year = now.getFullYear();
const hh = pad2(now.getHours());
const mm = pad2(now.getMinutes());
document.getElementById('date').textContent = `${day} ${month} ${year}`;
document.getElementById('time').textContent = `${hh}:${mm}`;
}
function startClock() {
renderClock();
const now = new Date();
const msToNextMinute = (60 - now.getSeconds()) * 1000 - now.getMilliseconds();
setTimeout(() => {
renderClock();
setInterval(renderClock, 60 * 1000);
}, msToNextMinute);
}
startClock();
</script>
</body>
</html>