realtime clock using html css code example

Example: how to make a clock in html/javascript

<!-- This is set automatically to your time zone -->
<script>
  
     function showTime(){
    var date = new Date();
    var d = date.getDate();
    var d1 = date.getDay();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "PM";
    
    if(h == 02){
        h = 12;
    }
    
    
    if(h > 12){
        session = "PM";
    }
    if(h < 12) {
    session = "AM"
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = d + "/"+  d1+ "  " +  "Time:" + "  " + h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    
    setTimeout(showTime, 1000);
    }
showTime();
</script>
<style>
  
     body {
    background: url('computerIMGedit.jpg');
    color: white;
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #e6967e;
    font-size: 60px;
    font-family: 'Josefin Sans', sans-serif;
    letter-spacing: 7px;
    -webkit-transition: 0.5s;
   


}
.clock:hover {
     transform: translateY(-10px);
     transition: 0.5s;
     font-size: 80px;
     color: whitesmoke;
}
</style>

<div id="MyClockDisplay" class="clock" onload="showTime()">
     </div>