WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calculadora de fecha
1026
styx125
Abrir en el editor
Publica tu código
¿Necesitas un sitio web?
Recomendado
30 March 2025
Un código de ytr3d3
1 June 2024
Animación de botones sin CSS
5 July 2025
Panel de inicio de sesión y registro de Glassy V3 de TheDoc
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; }
