How to create countdown clock
Creating a countdown clock using JavaScript involves calculating the remaining time, updating the clock display, and handling the countdown logic. Here's an example of how you can create a countdown clock:
1. Set up your HTML structure:
<!Doctype html>
<!DOCTYPE html>
<html>
<head>
<title>Countdown Clock Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="countdown">
<span id="days">00</span>
<span id="hours">00</span>
<span id="minutes">00</span>
<span id="seconds">00</span>
</div>
<script src="script.js"></script>
</body>
</html>2. Create a CSS file (styles.css) to style the countdown clock:
css
.countdown {
display: flex;
justify-content: center;
}
.countdown span {
margin: 0 10px;
font-size: 24px;
}3. Now, create a JavaScript file (script.js) to handle the countdown functionality:
javascript
document.addEventListener('DOMContentLoaded', function () {
const daysElement = document.getElementById('days');
const hoursElement = document.getElementById('hours');
const minutesElement = document.getElementById('minutes');
const secondsElement = document.getElementById('seconds');
// Set the target countdown date and time (YYYY-MM-DD HH:MM:SS)
const targetDate = new Date('2023-12-31 23:59:59');
function updateCountdown() {
const currentDate = new Date();
const remainingTime = targetDate - currentDate;
// Calculate the remaining days, hours, minutes, and seconds
const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 *
60));
const minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
// Update the countdown display
daysElement.textContent = formatTime(days);
hoursElement.textContent = formatTime(hours);
minutesElement.textContent = formatTime(minutes);
secondsElement.textContent = formatTime(seconds);
}
function formatTime(time) {
return time < 10 ? `0${time}` : time;
}
// Update the countdown initially
updateCountdown();
// Start the countdown by updating it every second
setInterval(updateCountdown, 1000);
});4. Place all the files (HTML, CSS, and JS) in the same folder.
Open the HTML file in a web browser, and you should see a countdown clock displaying the remaining days, hours, minutes, and seconds until the target date and time specified in the JavaScript code.
Adjust the CSS classes and styles as per your design requirements. You can modify the target date by changing the `targetDate` variable to the desired countdown end date and time in the format `YYYY-MM-DD HH:MM:SS`.
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.