How To Display The Live Date And Time On A Webpage?

Date First Published: 6th June 2023

Topic: Web Design & Development

Subtopic: Web Development

Article Type: Computer Questions & Answers

Difficulty: Medium

Difficulty Level: 6/10

CONTENTS

Source Code Explained

Learn about how to display the live date and time on a webpage in this article.

Displaying the date and time in real time is a very useful feature on a webpage. Below is an example of the live date and time on a webpage using JavaScript and jQuery along with an image of the output. If you want to place this script on your webpages, we recommend that you place it in a noticeable position, like on the footer or near the top of the webpage.

<!DOCTYPE html>

<head>

<title>Live Date and Time Using JavaScript and jQuery</title>

</script>

<style>

.datetime {

position: absolute;

font-size: 50px;

font-family: Roboto;

color: black;

background-color: #C8E4F3;

border-style: solid;

border-width: 3px;

border-color: #FDC6C6;

}

</style>

</head>

<h1>Live Date and Time Using JavaScript and jQuery</h1>

<div>

</div>

$(document)

.ready(function ()

{

ShowTime();

});

function ShowTime()

{

var dt = new Date();

document.getElementById("datetime")

.innerHTML = dt.toLocaleTimeString();

window.setTimeout("ShowTime()", 500);

}

</script>

function startTime()

{

var today = new Date();

var h = today.getHours();

var m = today.getMinutes();

var s = today.getSeconds();

var d = new Date();

var n = d.getDate();

var month = new Array();

month[0] = "January";

month[1] = "February";

month[2] = "March";

month[3] = "April";

month[4] = "May";

month[5] = "June";

month[6] = "July";

month[7] = "August";

month[8] = "September";

month[9] = "October";

month[10] = "November";

month[11] = "December";

var t = month[d.getMonth()];

var y = d.getFullYear();

m = checkTime(m);

s = checkTime(s);

document.getElementById('datetime')

.innerHTML = n + " " + t + " " + y + " " + h + ":" + m + ":" + s;

var t = setTimeout(function ()

{

startTime()

}, 500);

}

function checkTime(i)

{

if(i < 10)

{

i = "0" + i

};

return i;

}

</script>

</body>

</html>

Output when displayed onto a webpage

Source Code Explained

Below are the different elements and functions explained.

$(document)

.ready(function ()

{

ShowTime();

});

function ShowTime()

{

var dt = new Date();

document.getElementById("datetime")

.innerHTML = dt.toLocaleTimeString();

window.setTimeout("ShowTime()", 500);

}

This function above is used to instruct the date and time to display when ready.

function startTime()

{

var today = new Date();

var h = today.getHours();

var m = today.getMinutes();

var s = today.getSeconds();

var d = new Date();

var n = d.getDate();

var month = new Array();

month[0] = "January";

month[1] = "February";

month[2] = "March";

month[3] = "April";

month[4] = "May";

month[5] = "June";

month[6] = "July";

month[7] = "August";

month[8] = "September";

month[9] = "October";

month[10] = "November";

month[11] = "December";

var t = month[d.getMonth()];

var y = d.getFullYear();

m = checkTime(m);

s = checkTime(s);

Above, this is the main function. It is used to get the current year, month, date, hour, minute, and second, and display it in real time.

var t = setTimeout(function ()

{

startTime()

}, 500);

}

This function above is used to run the JavaScript code after 500 milliseconds (half a second).

function checkTime(i)

{

if(i < 10)

{

i = "0" + i

};

return i;

}

This function above adds a zero before the date and time if the number is less than 10.

Use this to link to this article:

HTML: <a href="https://computerhelp4all.com/articles/how-to-display-the-live-date-and-time-on-a-webpage.html">Computerhelp4all</a>

Plain link: https://computerhelp4all.com/articles/how-to-display-the-live-date-and-time-on-a-webpage.html

Feedback

Is there anything that you disagree with on this page?
Are there any spelling, grammatical, or punctuation errors on this page?
Are there any broken links or design errors on this page?

If so, it is important that you tell me as soon as possible on this page.

Comments

What Is Computerhelp4all?

Computerhelp4all is a site with articles for everyone about the topic of computing, as suggested in the name '4all'.

Featured Quizzes

How To Display The Live Date And Time On A Webpage?

Source Code Explained

Feedback

Comments

What Is Computerhelp4all?

Featured Articles

Featured Quizzes

Topics

Subtopics

Activities

Difficulty

Follow Computerhelp4all

Search

Related Articles

Related Articles

Top 10 Most Useful Free Software Programs You Should Have Installed

Top 20 Most Common Mistakes People Make When Using Computers

What Would Happen If The Internet Stopped Working?

Should I Include The Date On A Blog Post?