You can use the JavaScript Date object to work with dates and times. Therefore, you can create a newDate() with a Date object. Using the Date object, you can make a digital clock in JavaScript. In this article, we’ll explain to you an easy way to make a digital clock with a date using JavaScript. Our sample script of JavaScript code helps you to make a digital clock in your web project.
In this script, we will explain to you three types of clock format, clock with 24 hours, watch with 12 hours, and clock with the current date. At first, the javaScript code is provided and then the HTML code.
JavaScript 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() we use this method to call startTime() function every 500 milliseconds. On page load execute startTime() 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;
}
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;
}
SEE ALSO: How to Connect to the Remote MySQL Database using PHP
HTML Code
At first 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>
SEE ALSO: Form Validation using jQuery Validation Plugin
CSS
You can customize the digital clock as per your web page layout. Here we will use the following CSS code 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;
}
Also, read our previous blog- How to Force Download File in PHP