javaScript Digital Clock with date. In this javaScript Digital Clock with date tutorial, we will learn how to create digital clock with date in javaScript.
Display current date and time in digital clock using javascript
In the digital clock, the time will be display in the 12-hour format of HH : MM : SS AM/PM.
If you want to show time 24-hour in digital clock, so you can set time format like HH : MM : SS. and the time will be shown in 24-hour format.
javaScript Digital Clock with date
Follow the below three steps and create digital clock with date in javascript:
- Create one html file
- Write digital clock script
- Write css for styling
Create one HTML file
In this create one html file and update the below code into your file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>javaScript Digital Clock with date</title> </head> <body> <div class="digital_clock_wrapper"> <div id="digit_clock_time"></div> <div id="digit_clock_date"></div> </div> </body> </html>
Write digital clock script
Next step, open your HTML file and update the below script code into your file:
<script type="text/javascript">
function currentTime() {
var date = new Date(); /* creating object of Date class */
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var midday = "AM";
midday = (hour >= 12) ? "PM" : "AM"; /* assigning AM/PM */
hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour); /* assigning hour in 12-hour format */
hour = changeTime(hour);
min = changeTime(min);
sec = changeTime(sec);
document.getElementById("digit_clock_time").innerText = hour + " : " + min + " : " + sec + " " + midday; /* adding time to the div */
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[date.getDay()]; // get day
var curDay = date.getDate(); // get date
var curMonth = months[date.getMonth()]; // get month
var curYear = date.getFullYear(); // get year
var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear; // get full date
document.getElementById("digit_clock_date").innerHTML = date;
var t = setTimeout(currentTime, 1000); /* setting timer */
}
function changeTime(k) { /* appending 0 before time elements if less than 10 */
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}
currentTime();
</script>
Write css for styling
Final step, write a css for styling your digital clock. So open your html file and update the below code into your file for digital clock styling:
<style type="text/css">
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Orbitron');
#digit_clock_time {
font-family: 'Work Sans', sans-serif;
color: #66ff99;
font-size: 35px;
text-align: center;
padding-top: 20px;
}
#digit_clock_date {
font-family: 'Work Sans', sans-serif;
color: #66ff99;
font-size: 20px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
.digital_clock_wrapper{
background-color: #333;
padding: 25px;
max-width: 350px;
width: 100%;
text-align: center;
border-radius: 5px;
margin: 0 auto;
}
</style>
The full source code of javascript digital clock with a date is below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>javaScript Digital Clock with date</title>
<script type="text/javascript">
function currentTime() {
var date = new Date(); /* creating object of Date class */
var hour = date.getHours();
var min = date.getMinutes();
var sec = date.getSeconds();
var midday = "AM";
midday = (hour >= 12) ? "PM" : "AM"; /* assigning AM/PM */
hour = (hour == 0) ? 12 : ((hour > 12) ? (hour - 12): hour); /* assigning hour in 12-hour format */
hour = changeTime(hour);
min = changeTime(min);
sec = changeTime(sec);
document.getElementById("digit_clock_time").innerText = hour + " : " + min + " : " + sec + " " + midday; /* adding time to the div */
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[date.getDay()]; // get day
var curDay = date.getDate(); // get date
var curMonth = months[date.getMonth()]; // get month
var curYear = date.getFullYear(); // get year
var date = curWeekDay+", "+curDay+" "+curMonth+" "+curYear; // get full date
document.getElementById("digit_clock_date").innerHTML = date;
var t = setTimeout(currentTime, 1000); /* setting timer */
}
function changeTime(k) { /* appending 0 before time elements if less than 10 */
if (k < 10) {
return "0" + k;
}
else {
return k;
}
}
currentTime();
</script>
<style type="text/css">
/* Google font */
@import url('https://fonts.googleapis.com/css?family=Orbitron');
#digit_clock_time {
font-family: 'Work Sans', sans-serif;
color: #66ff99;
font-size: 35px;
text-align: center;
padding-top: 20px;
}
#digit_clock_date {
font-family: 'Work Sans', sans-serif;
color: #66ff99;
font-size: 20px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
.digital_clock_wrapper{
background-color: #333;
padding: 25px;
max-width: 350px;
width: 100%;
text-align: center;
border-radius: 5px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="digital_clock_wrapper">
<div id="digit_clock_time"></div>
<div id="digit_clock_date"></div>
</div>
</body>
</html>
Output:- display current date and time in HTML using javascript
Conclusion
In this javascript digital clock tutorial, you have learned how to create digital clock javascript.
Recommended JavaScript Tutorials
Recommended:-JavaScript: String Methods
Recommended:-JavaScript: Array Methods
Recommended:-JavaScript Create & Call Functions with Example
Recommended:-How To Use the JavaScript Fetch API to Get Data
Recommended:-JavaScript LocalStorage Example
Recommended:-javaScript Resize Image Example
Recommended:-JavaScript Cookies – Get, Create, Read, Delete
Recommended:-Javascript: Capture Image from Video
Recommended:-Highlight Search Result Vanilla JavaScript
Recommended:-Encode and Decode URL JavaScript
Recommended:-JavaScript Window Location | javaScript Window
If you have any questions or thoughts to share, use the comment form below to reach us.
Digital clock time and date js