Skip to main content
Display a clock using Date object.
CODING:
<!DOCTYPE html>
<html>
<head>
<title>Create Digital Clock with Date using JavaScript by CodexWorld</title>
<style type="text/css">

 .clockdate-wrapper {
    background-color:rgb(150,150,150);
    padding:25px;
    max-width:350px;
    width:100%;
    text-align:center;
    border-radius:50%;
   margin-left:70%;
}
#clock{
    background-color:black;
    font-family:Letter Gothic Std;
    font-size:60px;
    text-shadow:0px 0px 1px black;
    color:rgb(0,255,255);
}
#clock span {
color:white;
text-shadow:0px 0px 1px #333;
font-size:20px;
position:relative;
top:-27px;
left:-10px;
}
#date {
    letter-spacing:10px;
    font-size:14px;
    font-family:Letter Gothic Std;
    color:white;
}
</style>

 </head>
<body onload="startTime()">

 <script>
function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    ap = (hr < 12) ? "<span>AM</span>" : "<span>PM</span>";
    hr = (hr == 0) ? 12 : hr;
    hr = (hr > 12) ? hr - 12 : hr;
    
    hr = checkTime(hr);
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + ":" + min + ":" + sec + " " + ap;
    
    var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var curWeekDay = days[today.getDay()];
    var curDay = today.getDate();
    var curMonth = months[today.getMonth()];
    var curYear = today.getFullYear();
    var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear;
    document.getElementById("date").innerHTML = date;
    
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
</script>

 <div>
  <div class="clockdate-wrapper">
    <div id="clock"></div>
    <div id="date"></div>
  </div>
</div>

 </body>
</html>

Comments

Post a Comment