Time & Date
Home
Snippets
Time & Date
HTML
CSS
JS
<div class="date-time"> <div class="time" id="time"></div> <div class="date" id="date"></div> </div>
body { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #333; font-family: Arial, sans-serif; color: #fff; text-align: center; } .date-time { font-size: 2rem; padding: 30px; background-color: #444; border-radius: 10px; box-shadow: 0 0 10px #00000080; } .time { font-size: 2.5rem; margin-bottom: 10px; font-weight: bold; } .date { font-size: 2.2rem; }
function updateDateTime() { const now = new Date(); const dateOptions = { year: 'numeric', month: 'long', day: 'numeric' }; const formattedDate = now.toLocaleDateString(undefined, dateOptions); document.getElementById('date').textContent = formattedDate; const timeOptions = { hour: '2-digit', minute: '2-digit', second: '2-digit' }; const formattedTime = now.toLocaleTimeString(undefined, timeOptions); document.getElementById('time').textContent = formattedTime; } updateDateTime(); setInterval(updateDateTime, 1000);
Ad #1
Ad #2
Scroll to Top