Digital Clock JavaScript, HTML, CSS

👤 Sharing: AI
```html
<!DOCTYPE html>
<html>
<head>
<title>Digital Clock</title>
<style>
/* Basic CSS styling */
#clock {
  font-family: sans-serif;
  font-size: 60px;
  color: #fff;
  background-color: #000;
  text-align: center;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  margin: 100px auto; /* Center the clock on the page */
}
</style>
</head>
<body>

<div id="clock"></div>

<script>
// JavaScript code for the digital clock

function updateClock() {
  // Get the current date and time
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  // Add leading zeros if necessary (e.g., 09 instead of 9)
  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;

  // Format the time string
  var timeString = hours + ":" + minutes + ":" + seconds;

  // Update the content of the clock div
  document.getElementById("clock").innerHTML = timeString;
}

// Call updateClock() every second to keep the clock updated
setInterval(updateClock, 1000);

// Initial call to updateClock() to display the clock immediately
updateClock();

</script>

</body>
</html>
```

**Explanation:**

1.  **HTML Structure:**
    *   `<!DOCTYPE html>`:  Declares the document type as HTML5.
    *   `<html>`:  The root element of the HTML page.
    *   `<head>`:
        *   `<title>`: Sets the title of the browser tab to "Digital Clock".
        *   `<style>`: Contains CSS (Cascading Style Sheets) to style the clock.
    *   `<body>`:
        *   `<div id="clock"></div>`:  This creates a `div` element with the ID "clock".  This is where the time will be displayed.
        *   `<script>`:  Contains the JavaScript code that makes the clock work.

2.  **CSS Styling:**
    *   `#clock`:  Targets the `div` element with the ID "clock".
    *   `font-family`: Sets the font to sans-serif.
    *   `font-size`: Sets the font size to 60 pixels.
    *   `color`: Sets the text color to white.
    *   `background-color`: Sets the background color to black.
    *   `text-align`: Centers the text horizontally.
    *   `padding`: Adds padding around the text inside the `div`.
    *   `border-radius`:  Rounds the corners of the `div`.
    *   `width`: Sets the width of the `div`.
    *   `margin: 100px auto;`: Centers the `div` both vertically (top/bottom margin of 100px) and horizontally (left/right margin of auto distributes the remaining space equally).

3.  **JavaScript Code:**
    *   **`updateClock()` Function:**
        *   `var now = new Date();`: Creates a new `Date` object, which represents the current date and time.
        *   `var hours = now.getHours();`: Gets the current hours (0-23).
        *   `var minutes = now.getMinutes();`: Gets the current minutes (0-59).
        *   `var seconds = now.getSeconds();`: Gets the current seconds (0-59).
        *   `hours = (hours < 10) ? "0" + hours : hours;`: This is a ternary operator that adds a leading zero to the `hours` variable if it's less than 10.  For example, if `hours` is 9, it becomes "09". The same logic is applied to `minutes` and `seconds`. This ensures that the time is always displayed with two digits for each component.
        *   `var timeString = hours + ":" + minutes + ":" + seconds;`: Concatenates the `hours`, `minutes`, and `seconds` variables into a formatted time string (e.g., "14:30:55").
        *   `document.getElementById("clock").innerHTML = timeString;`:  This is the key line that updates the clock display.  It gets the element with the ID "clock" (the `div` we created) and sets its `innerHTML` property to the formatted `timeString`. This effectively replaces the content of the `div` with the current time.
    *   **`setInterval(updateClock, 1000);`:**
        *   `setInterval()` is a built-in JavaScript function that repeatedly calls a function (in this case, `updateClock()`) at a specified interval (in milliseconds).
        *   `updateClock`:  The name of the function to call repeatedly.  Note that we pass the *name* of the function, not the result of calling the function (so no parentheses).
        *   `1000`: The interval in milliseconds (1000 milliseconds = 1 second).  So, `updateClock()` will be called every second.
    *   **`updateClock();`:**
        *   This line calls `updateClock()` *immediately* when the page loads.  Without this, the clock would initially be blank until the `setInterval` timer kicked in after one second.

**How to run this code:**

1.  **Save the code:** Copy the entire HTML code and save it as an HTML file (e.g., `clock.html`).
2.  **Open in a browser:** Double-click the `clock.html` file to open it in your web browser (Chrome, Firefox, Safari, etc.).

The digital clock should now be displayed in your browser, and it will update every second.
👁️ Viewed: 10
Digital Clock JavaScript, HTML, CSS

Comments

Site Statistics
