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.
See Also: Working With S3 In Python Using Boto3: A Complete Guide!
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:
<!DOCTYPE html>
<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.
<!DOCTYPE html>
<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.
<!DOCTYPE html>
<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.
See Also: Types Of Operators In Python: Explained
How to use JavaScript
Following is how you use JavaScript for the same:
<!DOCTYPE html>
<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:
<!DOCTYPE html>
<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.
Conclusion
This is how you use JavaScript and HTML to create a simple website to display the current time of your timezone.