How to Display real time clock Date and Time using JavaScript

Shortlink:

Hello, Today I will teach you how to display real time clock date and time using JavaScript, It’s just simple just you can use below codes in your js file, create new .js file then copy/past below codes, and you can follow below step.

The script is simple, we will use the Javascript Object Date to get the date and the time. We will display the month in words(January, February…).

This is the code:
date_time.js


function 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 = ''+days[day]+' '+months[month]+' '+d+' '+year+' '+h+':'+m+':'+s;
document.getElementById(id).innerHTML = result;
setTimeout('date_time("'+id+'");','1000');
return true;
}

date_time.html


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>How to Display real time clock Date and Time using JavaScript</title>
</head>
<body>
<span id="date_time"></span>
<script type="text/javascript">window.onload = date_time('date_time');</script>
</body>
</html>

 

You can see demo here,

Demo

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!




%d bloggers like this: