Do you want to display the current date and time in HTML using JavaScript? well, this JavaScript code snippet helps you to create a digital clock widget on the webpage. It uses JavaScript date object to get the current date and time. The clock UI comes with real-time updating clock, AM/PM, and date with days.
If you’re working on a news/magazine website or project where you need to display a time widget, this project might be helpful for you. You can fully customize the clock design & layout according to your website/app template. You can also check this analog clock widget.
How to Display Current Date and Time in HTML using JavaScript
First of all, create a div element with an id “clockdate” and create two div elements (for clock and date) inside it wrapping with a div element “clockdate-wrapper”. Call the startTime() function inside the onload attribute of body tag. The following is the complete HTML structure for the clock:
<body onload="startTime()">
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"></div>
</div>
</div>
</body>
Now, style the clock widget using the following CSS styles. You can set the custom style in order to customize the clock accordion to your requirements.
.clockdate-wrapper {
background: #005C97; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #363795, #005C97); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #363795, #005C97); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
padding:25px;
max-width:350px;
width:100%;
text-align:center;
border-radius:5px;
margin:0 auto;
}
#clock{
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:50px;
position:relative;
top:-5px;
left:10px;
}
#date {
letter-spacing:3px;
font-size:14px;
font-family:arial,sans-serif;
color:#fff;
}
Finally, add the following JavaScript function to activate the clock.
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;
}
That’s all! hopefully, you have successfully displayed the current date and time. If you have any questions or suggestions, feel free to comment below.
