WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
दिनांक कैलकुलेटर
1167
styx125
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
16 October 2024
कैलकुलेटर
29 July 2024
आईफोन कैलकुलेटर
17 July 2025
वैज्ञानिक कैलकुलेटर
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; }
