Javascript – Digital Clock with Style

<!DOCTYPE html>
<html>
  <head>
    <title>Digital Clock</title>
    <style>
      .content {
        max-width: 500px;
        margin: auto;
      }
      .clock {
        font-size: 24pt;
        font-family: Baskerville, "Palatino Linotype", Palatino,
          "Century Schoolbook L", "Times New Roman", "serif";
        width: 180px;
        border: thick double #ff0004;
        margin: 15px;
        padding: 15px;
      }
    </style>
  </head>
  <body>
    <div id="content" class="content">
      <div id="clock" class="clock"></div>
      <div id="clock24" class="clock"></div>
      <div id="AlertText1" class="clock"></div>
      <div id="AlertText2" class="clock"></div>
    </div>
    <script>
      function showAlert() {
        var myText1 = "Hello world!";

        document.getElementById("AlertText1").textContent = myText1;
        alert(myText1);
        var myText2 = "This can be whatever text you like!";
        alert(myText2);

        document.getElementById("AlertText2").textContent = myText2;
      }

      function updateTime() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        if (minutes < 10) {
          minutes = "0" + minutes; // Add leading zero for minutes
        }
        if (seconds < 10) {
          seconds = "0" + seconds; // Add leading zero for seconds
        }

        var timeOfDay = hours >= 12 && hours < 24 ? "PM" : "AM"; // Determine AM or PM
        if (hours > 12) {
          hours = hours - 12; // Convert to 12-hour format
        }

        if (hours < 10) {
          hours = "0" + hours; // Add leading zero for hours
        }

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

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

      function updateTime24() {
        var now = new Date();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        if (minutes < 10) {
          minutes = "0" + minutes; // Add leading zero for minutes
        }
        if (seconds < 10) {
          seconds = "0" + seconds; // Add leading zero for seconds
        }

        // var timeOfDay = (hours >= 12 && hours < 24) ? 'PM' : 'AM'; // Determine AM or PM
        //if (hours > 12) {
        //  hours = hours - 12; // Convert to 12-hour format
        // }

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

        // Update the content of the clock div
        document.getElementById("clock24").textContent = time;
      }

      // Call updateTime immediately when the page loads, and then update every second
      window.onload = function () {
        showAlert();
        updateTime(); // Initial update
        updateTime24(); // Initial update
        setInterval(updateTime, 1000); // Update the time every second
        setInterval(updateTime24, 1000); // Update the time every second
      };
    </script>
  </body>
</html>

All information on this site is shared with the intention to help. Before any source code or program is ran on a production (non-development) system it is suggested you test it and fully understand what it is doing not just what it appears it is doing. I accept no responsibility for any damage you may do with this code.

Related