mirror of
https://github.com/cram-naej/cram-naej.github.io.git
synced 2026-06-01 10:52:19 +00:00
116 lines
3.8 KiB
HTML
116 lines
3.8 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 calculerDifferencePrecise(dateCible, maintenant) {
|
|
let annees = maintenant.getFullYear() - dateCible.getFullYear();
|
|
let mois = maintenant.getMonth() - dateCible.getMonth();
|
|
let jours = maintenant.getDate() - dateCible.getDate();
|
|
|
|
// Ajustement si le jour du mois n'est pas encore atteint
|
|
if (jours < 0) {
|
|
mois--;
|
|
// Obtenir le nombre de jours du mois précédent
|
|
const dernierJourMoisPrecedent = new Date(
|
|
maintenant.getFullYear(),
|
|
maintenant.getMonth(),
|
|
0
|
|
).getDate();
|
|
jours += dernierJourMoisPrecedent;
|
|
}
|
|
|
|
// Ajustement si le mois n'est pas encore atteint
|
|
if (mois < 0) {
|
|
annees--;
|
|
mois += 12;
|
|
}
|
|
|
|
// Calcul des heures, minutes et secondes
|
|
const deltaMs = maintenant - dateCible;
|
|
const secondesTotales = Math.abs(Math.floor(deltaMs / 1000));
|
|
const heures = Math.floor((secondesTotales % 86400) / 3600);
|
|
const minutes = Math.floor((secondesTotales % 3600) / 60);
|
|
const secondes = secondesTotales % 60;
|
|
|
|
return {
|
|
annees: annees,
|
|
mois: mois,
|
|
jours: jours,
|
|
heures: heures,
|
|
minutes: minutes,
|
|
secondes: secondes,
|
|
deltaMs: deltaMs
|
|
};
|
|
}
|
|
|
|
function afficherDifference(dateCible, nom, elementId, type) {
|
|
const maintenant = new Date();
|
|
const difference = calculerDifferencePrecise(dateCible, maintenant);
|
|
|
|
let sens = difference.deltaMs > 0 ? "Il y a" : "Il reste";
|
|
const emoji = type === "evenement" ? "💖" : "🎂";
|
|
|
|
document.getElementById(elementId).innerHTML = `
|
|
<strong>${emoji} ${nom}</strong><br>
|
|
${sens} ${Math.abs(difference.annees)} années,
|
|
${Math.abs(difference.mois)} mois,
|
|
${Math.abs(difference.jours)} jours,
|
|
${Math.abs(difference.heures)} heures,
|
|
${Math.abs(difference.minutes)} minutes et
|
|
${Math.abs(difference.secondes)} secondes
|
|
`;
|
|
}
|
|
|
|
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> |