Last updated on December 21st, 2022 at 08:51 am
In this tutorial we are going to see how to show a real time and date clock using Javascript.
Let us first create a function named todays_date_time(), the parameter we are passing to this function is the id of any HTML element. For this example I am using SPAN.
function todays_date_time(id)
{
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = '<b>'+days[day]+' '+months[month]+' '+d+' '+year+' '+h+':'+m+':'+s+'</b>';
document.getElementById(id).innerHTML = result;
setTimeout('todays_date_time("'+id+'");','1000');
return true;
}
In order to call the function we created above, use body tag with onload option as shown.
<body onload="todays_date_time('date-time')">
Now that you have the function getting triggered during the webpage load time we need to define the id “date-time” inside HTML <body> tag for it to display the time and date. You are free to use any HTML element, end of the day it should be having id=”date-time”.
<span id="date-time"></span>
Thats it. You are done with the script. Just load your HTML to see it working.
Complete Script
<body onload="todays_date_time('date-time')">
<script>
function todays_date_time(id)
{
date = new Date;
year = date.getFullYear();
month = date.getMonth();
months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'Jully', 'August', 'September', 'October', 'November', 'December');
d = date.getDate();
day = date.getDay();
days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
h = date.getHours();
if(h<10)
{
h = "0"+h;
}
m = date.getMinutes();
if(m<10)
{
m = "0"+m;
}
s = date.getSeconds();
if(s<10)
{
s = "0"+s;
}
result = '<b>'+days[day]+' '+months[month]+' '+d+' '+year+' '+h+':'+m+':'+s+'</b>';
document.getElementById(id).innerHTML = result;
setTimeout('todays_date_time("'+id+'");','1000');
return true;
}
</script>
<span id="date-time"></span>
Above code will just display a basic clock with no style. Our next step is to add some style to it so that it looks way beautiful .
Lets add a class to the SPAN named “style-me“
<span class="style-me" id="date-time"></span>
Last step is to load the style. Make sure to add it just after the HEAD tag
<style>
/* CSS */
.style-me{
background-color: #64A85E;
border: solid transparent;
border-radius: 16px;
border-width: 0 0 4px;
box-sizing: border-box;
color: #FFFFFF;
display: inline-block;
font-family: din-round,sans-serif;
font-size: 18px;
font-weight: 700;
letter-spacing: .8px;
line-height: 20px;
margin: 0;
outline: none;
overflow: visible;
padding: 13px 16px;
text-align: center;
text-transform: uppercase;
transform: translateZ(0);
transition: filter .2s;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
width: 50%;
}
</style>
Feel free to modify it according to your requirement.
admin