close
JavaScript Date object is used to work with dates and times. Date object is created with new Date(). Using Date object, you can create a digital clock in JavaScript. In this article, we’ll show the simplest way to make a digital clock with date using JavaScript. Our easy to use JavaScript code helps to create a digital clock in your web project instantly.
Here you can get three types of clock format, clock with 24 hours, clock with 12 hours, and clock with current date. At first, the javaScript code is provided and then the HTML code.
In startTime() function, new Date() is used to define the current Date object. Hours, Minutes, Seconds, Day, Date, Month, and Year are extracted from the Date object using getHours(), getMinutes(), getSeconds(), getDay(), getDate(), getMonth(), and getFullYear() respectively.
At the end of startTime() function, setTimeout() method is used to calls startTime() function every 500 milliseconds. On page load startTime() is executed by the <body> onload event attribute.
Digital Clock with 24 hours Format:
function startTime() { var today = new Date(); var hr = today.getHours(); var min = today.getMinutes(); var sec = today.getSeconds(); //Add a zero in front of numbers<10 min = checkTime(min); sec = checkTime(sec); document.getElementById("clock").innerHTML = hr + " : " + min + " : " + sec; var time = setTimeout(function(){ startTime() }, 500); } function checkTime(i) { if (i < 10) { i = "0" + i; } return i; }
Digital Clock with 12 hours Format:
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; //Add a zero in front of numbers<10 hr = checkTime(hr); min = checkTime(min); sec = checkTime(sec); document.getElementById("clock").innerHTML = hr + " : " + min + " : " + sec + " " + ap; var time = setTimeout(function(){ startTime() }, 500); } function checkTime(i) { if (i < 10) { i = "0" + i; } return i; }
Digital Clock with Current Date:
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; //Add a zero in front of numbers<10 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; }
Atfirst add onload Event Attribute within the <body> element to execute setTimeout() function on page load.
<body onload="startTime()">
HTML to display digital clock:
<div id="clockdate"> <div class="clockdate-wrapper"> <div id="clock"></div> <div id="date"></div> </div> </div>
You can style digital clock as per your web page layout. Here the following CSS code is used to the basic styling of a digital clock.
.clockdate-wrapper { background-color: #333; padding:25px; max-width:350px; width:100%; text-align:center; border-radius:5px; margin:0 auto; margin-top:15%; } #clock{ background-color:#333; font-family: sans-serif; font-size:60px; text-shadow:0px 0px 1px #fff; color:#fff; } #clock span { color:#888; text-shadow:0px 0px 1px #333; font-size:30px; position:relative; top:-27px; left:-10px; } #date { letter-spacing:10px; font-size:14px; font-family:arial,sans-serif; color:#fff; }
Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request
Thank you for this code!
I’m not sure but it will show Friday even we have Thursday, April 14.
@Matjaz Thanks for notifying the issue. We’ve updated the code, please see or download the latest source code.