|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| 6 | + <title>Live Millisecond Clock</title> |
| 7 | + <style> |
| 8 | + /* Ensure HTML and Body fill the entire viewport */ |
| 9 | + html, body { |
| 10 | + height: 100%; |
| 11 | + margin: 0; |
| 12 | + overflow: hidden; /* Hide scrollbars if content slightly overflows */ |
| 13 | + font-family: sans-serif; /* Use Inter font as preferred */ |
| 14 | + background-color: #000; /* Black background color */ |
| 15 | + color: #FFF; /* White text color */ |
| 16 | + } |
| 17 | + |
| 18 | + /* Center content using flexbox */ |
| 19 | + body { |
| 20 | + display: flex; |
| 21 | + align-items: center; /* Center vertically */ |
| 22 | + justify-content: center; /* Center horizontally */ |
| 23 | + width: 100%; |
| 24 | + } |
| 25 | + |
| 26 | + /* Responsive font size using viewport width and clamp for min/max */ |
| 27 | + #clock { |
| 28 | + font-size: 12vw; /* Responsive font size: min 4rem, 15% of viewport width, max 15rem */ |
| 29 | + line-height: 1; /* Adjust line height for large text */ |
| 30 | + text-align: center; /* Center the text within its container */ |
| 31 | + font-weight: 700; /* Bold font weight */ |
| 32 | + /* Removed text-shadow for a simple look */ |
| 33 | + letter-spacing: -0.05em; /* Slightly tighter letter spacing */ |
| 34 | + |
| 35 | + /* Increased padding to prevent clipping on edges */ |
| 36 | + padding: 0 4vw; /* Increased to 4% of viewport width padding on left and right */ |
| 37 | + box-sizing: border-box; /* Ensure padding is included in the element's total width */ |
| 38 | + } |
| 39 | + </style> |
| 40 | +</head> |
| 41 | +<body> |
| 42 | + <!-- Clock display container --> |
| 43 | + <div id="clock"> |
| 44 | + Loading... |
| 45 | + </div> |
| 46 | + |
| 47 | + <script> |
| 48 | + // Get the clock element |
| 49 | + const clockElement = document.getElementById('clock'); |
| 50 | + |
| 51 | + /** |
| 52 | + * Updates the clock display with the current time including milliseconds. |
| 53 | + */ |
| 54 | + function updateClock() { |
| 55 | + const now = new Date(); // Get the current date and time |
| 56 | + |
| 57 | + // Format hours, minutes, and seconds with leading zeros |
| 58 | + const hours = String(now.getHours()).padStart(2, '0'); |
| 59 | + const minutes = String(now.getMinutes()).padStart(2, '0'); |
| 60 | + const seconds = String(now.getSeconds()).padStart(2, '0'); |
| 61 | + // Format milliseconds with leading zeros (e.g., 001, 010, 100) |
| 62 | + const milliseconds = String(now.getMilliseconds()).padStart(3, '0'); |
| 63 | + |
| 64 | + // Construct the time string |
| 65 | + // Example: 14:35:01.234 |
| 66 | + const timeString = `${hours}:${minutes}:${seconds}.${milliseconds}`; |
| 67 | + |
| 68 | + // Update the text content of the clock element |
| 69 | + clockElement.textContent = timeString; |
| 70 | + |
| 71 | + requestAnimationFrame(updateClock); |
| 72 | + } |
| 73 | + |
| 74 | + updateClock(); |
| 75 | + </script> |
| 76 | +</body> |
| 77 | +</html> |
0 commit comments