This content originally appeared on DEV Community and was authored by Code Media
In this article you will learn how to create JavaScript in countdown time. It's a bit like a digital watch, but it's the complete opposite. In the case of this watch the time tends to decrease gradually.
This will continue to be the countdown for the time or date you want to run the countdown. It will take the current time from your device using JavaScript's New Date Method. Then subtract the current time with your input time.
It will continue to run the countdown by converting the subtraction time into days, hours, minutes and seconds. I took the help of HTML, CSS and JavaScript to make it.
You want a preview? Watch the live demo
HTML has done some basic design of CSS and JavaScript has implemented it. However, only one line of HTML code has been used here. Below I have given the required source code and an explanation of how to create one.
We hope you can create this simple countdown time by following this tutorial below.
1. HTML code of Countdown Timer
The code below is the HTML code needed to create this countdown timer. As I said before, only one line of HTML code has been used to create this timer.
This HTML code is basically for the basic structure of the countdown timer.
<div id="timer"></div>
2. CSS code of Countdown Timer
Now it's time to design this timer using css code. Here I have used some basic CSS to design web pages. Here I have used black color on the web page and padding to place the timer in the middle of the webpage.
body {
text-align: center;
padding: 70px 50px;
background: #0D1A29;
font-family: sans-serif;
font-weight: lighter;
}
Now designed the background of this timer using the following CSS code. Here we have created an area called Background whose width: 400px and height depends on the amount of content. I have used a border here to understand the area.
#timer {
font-size: 3em;
font-weight: 100;
margin: 80px auto;
color: white;
border: 2px solid #B1CDF1;
padding: 20px;
width: 400px;
text-shadow: 0 0 20px #0eea9d;
}
Now, using the following JavaScript, I have designed the text in this timer and the number of times to display. The question may arise in your mind, there is no HTML code added for this.
For this I have added HTML code in JavaScript using 'innerHTML'. Now I have added his css code.
#timer div {
display: inline-block;
min-width: 90px;
}
#timer div span {
color: #1fd681;
display: block;
font-size: .35em;
font-weight: 400;
}
3. Countdown Timer's JavaScript
Now is the time to add the required JavaScript for this JavaScript countdown timer. Below are all the codes together and the necessary explanations on each line. Hopefully the following expressions will help you understand the codes.
function updateTimer() {
//Now you have to decide what time you want to run the countdown
//Date. parse() method parses a string representation of a date, and returns the number of milliseconds
future = Date.parse("jan 1, 2022 11:30:00");
//The current time has been taken from the device using the new Date () method
now = new Date();
//Now I have saved the total time of the countdown in "diff"
//Countdown time = input time - current time
diff = future - now;
//days= countdown time/ 1 day
// 1 seconds = 1000 milliseconds
days = Math.floor(diff / (1000 * 60 * 60 * 24));
// hours = countdown time / 1 hours
hours = Math.floor(diff / (1000 * 60 * 60));
// mins = countdown time / 1 minutes
mins = Math.floor(diff / (1000 * 60));
// secs = countdown time / 1 seconds
secs = Math.floor(diff / 1000);
d = days;
h = hours - days * 24;
m = mins - hours * 60;
s = secs - mins * 60;
//Now you have to make arrangements to display all the content in the webpage with the help of "innerHTML"
//The innerHTML property is part of the Document Object Model (DOM)
document.getElementById("timer")
.innerHTML =
'<div>' + d + '<span>days</span></div>' +
'<div>' + h + '<span>hours</span></div>' +
'<div>' + m + '<span>minutes</span></div>' +
'<div>' + s + '<span>seconds</span></div>';
}
//The setInterval() method, offered on the Window, repeatedly calls a function or executes a code snippet
//Here the time is set to 1000 milliseconds or 1 second.
//So the countdown time will be updated every 1 second
setInterval('updateTimer()', 1000);
Hopefully you have been able to create this simple JavaScript countdown timer using the tutorials and sourcecodes above. If there is any problem then you can definitely let me know by commenting.
If you want you can download source code to make this timer.
This content originally appeared on DEV Community and was authored by Code Media
Code Media | Sciencx (2021-12-16T17:03:18+00:00) Build a Countdown Timer using JavaScript. Retrieved from https://www.scien.cx/2021/12/16/build-a-countdown-timer-using-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.