WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calcolatrice di data
1370
styx125
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
11 December 2024
Un codice di slowapp370
2 June 2025
Un codice di alejandrokundrah
17 May 2025
Modulo di accesso moderno + barra laterale scorrevole
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; }
