<div class="container"> <h1>UTC Milliseconds Converter</h1> <p class="subtitle">Convert UTC milliseconds to local time</p> <div class="input-group"> <label for="milliseconds">Enter UTC Milliseconds</label> <input type="text" id="milliseconds" placeholder="e.g., 1730822400000" value="1730822400000" > </div> <div class="button-group"> <button onclick="convertTime()">Convert</button> <button class="secondary-btn" onclick="useCurrentTime()">Use Current Time</button> </div> <div class="result-box" id="resultBox"> <div class="result-item"> <div class="result-label">Local Date & Time</div> <div class="result-value" id="localDateTime">-</div> </div> <div class="result-item"> <div class="result-label">ISO String</div> <div class="result-value" id="isoString">-</div> </div> <div class="result-item"> <div class="result-label">UTC String</div> <div class="result-value" id="utcString">-</div> </div> </div> <div class="example"> Example: Current time is <span id="currentMs"></span> ms </div> </div>
* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } .container { background: rgba(255, 255, 255, 0.95); padding: 40px; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15); max-width: 500px; width: 100%; } h1 { font-size: 24px; color: #333; margin-bottom: 10px; text-align: center; } .subtitle { text-align: center; color: #666; font-size: 14px; margin-bottom: 30px; } .input-group { margin-bottom: 25px; } label { display: block; font-size: 14px; color: #555; margin-bottom: 8px; font-weight: 500; } input { width: 100%; padding: 14px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; transition: border-color 0.3s; font-family: 'Courier New', monospace; } input:focus { outline: none; border-color: #667eea; } .button-group { display: flex; gap: 10px; margin-bottom: 25px; } button { flex: 1; padding: 14px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s; color: white; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } button:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); } button:active { transform: translateY(0); } .secondary-btn { background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important; } .result-box { background: #f8f9fa; padding: 20px; border-radius: 8px; border-left: 4px solid #667eea; } .result-item { margin-bottom: 15px; } .result-item:last-child { margin-bottom: 0; } .result-label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 5px; } .result-value { font-size: 16px; color: #333; font-weight: 500; font-family: 'Courier New', monospace; } .example { text-align: center; margin-top: 20px; font-size: 13px; color: #999; }
function convertTime() { const input = document.getElementById('milliseconds').value.trim(); const ms = parseInt(input); if (isNaN(ms)) { alert('Please enter a valid number'); return; } const date = new Date(ms); // Local date and time const localDateTime = date.toLocaleString('en-US', { weekday: 'short', year: 'numeric', month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true }); document.getElementById('localDateTime').textContent = localDateTime; document.getElementById('isoString').textContent = date.toISOString(); document.getElementById('utcString').textContent = date.toUTCString(); } function useCurrentTime() { const now = Date.now(); document.getElementById('milliseconds').value = now; convertTime(); } function updateCurrentMs() { document.getElementById('currentMs').textContent = Date.now().toLocaleString(); } // Initialize updateCurrentMs(); setInterval(updateCurrentMs, 1000); convertTime(); // Allow Enter key to convert document.getElementById('milliseconds').addEventListener('keypress', function(e) { if (e.key === 'Enter') { convertTime(); } });
Login to leave a comment
No comments yet. Be the first!
View Project
No comments yet. Be the first!