mirror of
https://github.com/cram-naej/cram-naej.github.io.git
synced 2026-06-01 10:52:19 +00:00
91 lines
2.9 KiB
HTML
91 lines
2.9 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Calcul de durée</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #f5f5f5;
|
|
padding: 20px;
|
|
}
|
|
.box {
|
|
background: white;
|
|
padding: 15px;
|
|
margin-bottom: 15px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
}
|
|
.anniversaire {
|
|
color: #e74c3c;
|
|
}
|
|
.evenement {
|
|
color: #3498db;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>Différence de dates</h1>
|
|
|
|
<div class="box anniversaire" id="marius"></div>
|
|
<div class="box evenement" id="rencontre"></div>
|
|
<div class="box anniversaire" id="jean-marc"></div>
|
|
<div class="box anniversaire" id="anais"></div>
|
|
|
|
<script>
|
|
function afficherDifference(dateCible, nom, elementId, type) {
|
|
const maintenant = new Date();
|
|
let deltaMs = dateCible - maintenant;
|
|
let sens = "Il reste";
|
|
let emoji = "🎂";
|
|
|
|
if (type === "evenement") {
|
|
emoji = "💖";
|
|
}
|
|
|
|
if (deltaMs < 0) {
|
|
deltaMs = maintenant - dateCible;
|
|
sens = "Il y a";
|
|
}
|
|
|
|
const secondesTotales = Math.floor(deltaMs / 1000);
|
|
const jours = Math.floor(secondesTotales / 86400);
|
|
const heures = Math.floor((secondesTotales % 86400) / 3600);
|
|
const minutes = Math.floor((secondesTotales % 3600) / 60);
|
|
const secondes = secondesTotales % 60;
|
|
|
|
// Calcul des mois et années approximatifs
|
|
const moisEnviron = jours > 0 ? Math.floor(jours / 30) : 0;
|
|
const anneesEnviron = moisEnviron > 0 ? (moisEnviron / 12).toFixed(2) : 0;
|
|
|
|
document.getElementById(elementId).innerHTML = `
|
|
<strong>${emoji} ${nom}</strong><br>
|
|
${sens} ${jours} jours, ${heures} heures,
|
|
${minutes} minutes et ${secondes} secondes<br>
|
|
(≈ ${moisEnviron} mois, ≈ ${anneesEnviron} ans)
|
|
`;
|
|
}
|
|
|
|
const dateAnniversaireMarius = new Date("2025-07-20T19:21:00");
|
|
const dateAnniversaireDeRencontre = new Date("2018-10-29T21:56:00");
|
|
const dateAnniversaireJeanMarc = new Date("1991-07-20T12:50:00");
|
|
const dateAnniversaireAnais = new Date("1983-06-06T07:45:00");
|
|
|
|
function mettreAJour() {
|
|
afficherDifference(dateAnniversaireMarius, "Anniversaire Marius", "marius", "anniversaire");
|
|
afficherDifference(dateAnniversaireDeRencontre, "Anniversaire de rencontre", "rencontre", "evenement");
|
|
afficherDifference(dateAnniversaireJeanMarc, "Anniversaire Jean-Marc", "jean-marc", "anniversaire");
|
|
afficherDifference(dateAnniversaireAnais, "Anniversaire Anaïs", "anais", "anniversaire");
|
|
}
|
|
|
|
// Mise à jour immédiate
|
|
mettreAJour();
|
|
|
|
// Mise à jour chaque seconde
|
|
setInterval(mettreAJour, 1000);
|
|
</script>
|
|
|
|
</body>
|
|
</html> |