Digital Clock In JavaScript

digital-clock-in-javascript.markdown

Digital Clock In JavaScript

A Pen by Ethan Hsu on CodePen.

License.

index.html

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

    

script.js

function showTime(){
    var arr = ["#F4B400","#0F9D58"];
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "PM";
    
    if(h == 0){
        h = 13;
    }
    
    if(h > 12){
        h = h - 12;
        session = "AM";
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    document.getElementById("MyClockDisplay").style.color = arr[m%2];
 
document.body.style.backgroundColor = arr[(m+1)%2];
    
    setTimeout(showTime, 1000);
    
}

showTime();

style.css

/* latin */
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Google Sans Bold'), local('GoogleSans-Bold'), url(https://fonts.gstatic.com/s/googlesans/v13/4UabrENHsxJlGDuGo1OIlLV154tzCwY.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body {
    background: #0F9D58;
}

.clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: #F4B400;
    font-size: 60px;
    font-family: Google Sans;
   


}