Build a Clock using JavaScript
Let's create a simple digital clock using JavaScript. We'll use HTML to create the structure and JavaScript to update the time dynamically.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Simple Digital Clock</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
#clock {
font-size: 48px;
}
</style>
</head>
<body>
<div id="clock"></div>
<script src="clock.js"></script>
</body>
</html>
JavaScript (clock.js):
javascript
function updateClock() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const timeString = `${hours}:${minutes}:${seconds}`;
document.getElementById('clock').textContent = timeString;
}
// Call updateClock() every second to update the time
setInterval(updateClock, 1000);
// Initial call to set the clock when the page loads
updateClock();In this example, we have a simple HTML structure with a `<div>` element to display the clock. We also have some minimal CSS to center the clock on the screen and apply a larger font size.
The JavaScript code uses the `setInterval` function to call the `updateClock` function every second (1000 milliseconds). The `updateClock` function gets the current date and time using the `Date` object, formats the hours, minutes, and seconds with leading zeros, and then updates the content of the `<div>` element with the current time.
When you open this HTML file in your web browser, you should see a digital clock displaying the current time, and it will automatically update every second.
Output:
About the Author
Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.
We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc
PreviousNext
Join our newsletter for the latest updates.
About us
Our Services
Contact Us
Our Courses
Learn Python | Learn AI | Learn Machine Learning | Learn Deep Learning | Learn Core Java | Learn Java JSP | Learn Java Servlet | Learn Java Spring Core | Learn Spring Boot | Learn Power BI | Learn DAA | Learn HTML | Learn SQL | Learn C Programming | Learn Bootstrap | Learn Git | Learn JavaScript | Learn Data Structure Using C | Learn RDBMS | Learn Data Science | Learn PHP
Our Tutorials
Python Tutorial | AI Tutorial | Machine Learning Tutorial | Deep Learning Tutorial | Core Java Tutorial | Java JSP Tutorial | Java Servlet Tutorial | Java Spring Tutorial | Spring Boot Tutorial | Power BI Tutorial | DAA Tutorial | HTML Tutorial | SQL Tutorial | C Programming Tutorial | Bootstrap Tutorial | Git Tutorial | JavaScript Tutorial | Data Structure Using C Tutorial | RDBMS Tutorial | Data Science Tutorial | PHP Tutorial
Copyright © 2023 Pythontpoint Powered by Silan Software Pvt. Ltd. All rights reserved.