Display Time In HTML Using JavaScript: A Simple Guide

How to display time in HTML using JavaScript? While developing any website, you can divide it into two parts: front end and back end. The front end is the portion you can interact with and view in a browser, and the back end is like the backbone supporting the browser’s front end. The tools used by developers to develop the front end of the website include HTML, CSS, and JavaScript.

HTML (Hypertext Markup Language) is a markup language used to define the webpage’s building blocks and structure. CSS (Cascading Stylesheet) is a style sheet language used to describe the website’s layout, making it attractive and presentable. And JavaScript is a programming language used to add functionality and define webpage behavior. You can convert String To Date In Javascript In Dd-Mm-Yyyy Format by following few steps.

Table of Contents

Display time in HTML

Here are a few ways to display time in HTML using JavaScript:

Step 1:

First, you must create an HTML file in code editor software and define the website’s structure. The basic starting structure is as follows:

<html>
<head>
<title>Time display on webpage</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
</body>
</html>

Here we have linked the CSS file for this particular HTML file as “style.css” in the 5th line.

Step 2

After this, we will add a div in the body tag with the name container. The CSS file mentions all the relevant information regarding its position and color.

<html>
<head>
<title>Time display on webpage</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
</div>
</body>
</html>

Now we will add an image in the container using the img tag.

Step 3

Then we will add one h1 tag where we will display the time.

<html>
<head>
<title>Time display on webpage</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<img src=”image.png”>
<h1 id=”current-time”></h1>
</div>
</body>
</html>

Our structure for the website is now ready. We need to use JavaScript to display the current time on the webpage.

How to use JavaScript

Following is how you use JavaScript for the same:

<html>
<head>
<title>Time display on webpage</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<img src=”image.png”>
<h1 id=”current-time”></h1>
</div>
<script>
let time = document.getElementById(“current-time”);
let d = new Date();
time.innerHTML = d.tolocaleTimeString();
</body>
</html>

Now the website will show the current time, but you have to refresh the page manually to update the time. So now we will again go back to the code editor software and make the following change:

<html>
<head>
<title>Time display on webpage</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”container”>
<img src=”image.png”>
<h1 id=”current-time”></h1>
</div>
<script>
let time = document.getElementById(“current-time”);
setInterval(() =>{
let d = new Date();
time.innerHTML = d.tolocaleTimeString();
},1000)
</body>
</html>

With this, the time displayed on the website will update every second, and you can now see the current time of your time zone.

FAQS

How to update the time display in real time?

To update the time display in real time, you can use the setInterval() method to call a function that updates the time display every second. This function should create a new Date object and then extract the hours, minutes, and seconds from it using the getHours(), getMinutes(), and getSeconds() methods.

How to format the time display?

You can format the time display using the toLocaleTimeString() method, which formats the time according to the user's locale. This method takes an optional argument allowing you to specify the formatting options, such as the time zone and style.

How can I add a leading zero to single-digit values?

You can add a leading zero to single-digit values using the padStart() method, which pads a string with a specified character until it reaches a certain length. For example, you can use the expression String(num).padStart(2, '0') to add a leading zero to a single-digit number.

How to change the time display format dynamically?

You can dynamically change the time display format by updating the options parameter of the toLocaleTimeString() method or the Intl—DateTimeFormat () constructor. For example, you can create a dropdown menu that allows the user to select the time format and then update the options parameter based on the user's selection.

How to display a countdown timer?

You can display a countdown timer by subtracting the current date and time from the target date and time and then formatting the resulting duration using the toLocaleString() method. You can also update the display in real-time using the setInterval() method.

Conclusion

This is how you use JavaScript and HTML to create a simple website to display the current time of your timezone.

Learn how to Display HTML Images And Text Side By Side.

StrobeCorp