WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculateur de date
1165
styx125
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
10 February 2025
Code du formulaire de connexion HTML CSS
9 May 2024
Illustration de phare de jour et de nuit
9 July 2025
Iframe réactif avec navigation d'aperçu de l'appareil
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Datum Rechner</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Datum</h1> <div class="date-inputs"> <label for="start-date">Von</label> <input type="date" id="start-date"> <label for="end-date">Bis</label> <input type="date" id="end-date"> </div> <div class="result"> <h2>Differenz</h2> <div id="difference"> <div>Jahre: <span id="years">0</span></div> <div>Monate: <span id="months">0</span></div> <div>Tage: <span id="days">0</span></div> </div> <div id="total-days">Total Days: <span>0</span></div> </div> <button onclick="calculateDifference()">Berechnen</button> </div> <script src="script.js"></script> </body> </html>
CSS
Copy
body { font-family: Arial, sans-serif; background-color: #121212; color: #ffffff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { text-align: center; background-color: #1f1f1f; padding: 20px; border-radius: 10px; } h1, h2 { margin: 10px 0; color: #f66b0e; } .date-inputs { display: flex; justify-content: space-around; margin: 20px 0; } .date-inputs label, .date-inputs input { margin: 0 10px; color: #ffffff; } .result { background-color: #262626; padding: 20px; border-radius: 10px; } button { background-color: #f66b0e; color: #ffffff; border: none; padding: 10px 20px; margin-top: 20px; cursor: pointer; border-radius: 5px; } button:hover { background-color: #e65a00; } input { -webkit-text-fill-color: #f66b0e; }
JS
Copy
function calculateDifference() { const startDate = new Date(document.getElementById('start-date').value); const endDate = new Date(document.getElementById('end-date').value); if (isNaN(startDate) || isNaN(endDate)) { alert('Bitte geben Sie gültige Daten ein.'); return; } const diffTime = Math.abs(endDate - startDate); const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); let years = Math.floor(diffDays / 365); let months = Math.floor((diffDays % 365) / 30); let days = (diffDays % 365) % 30; document.getElementById('years').textContent = years; document.getElementById('months').textContent = months; document.getElementById('days').textContent = days; document.getElementById('total-days').querySelector('span').textContent = diffDays; }
