Embedded Files
Empowering Today’s Learners to Become Tomorrow’s Leaders
Set the end date for the timer
Set the end date for the timer
To create a countdown timer using Javascript, we first need to declare a variable that holds the date and time that we want our countdown timer to run down to. We create a Date object and then call the getTime() function on this object. The getTime() method makes the countDownDate variable hold the milliseconds since Jan 1, 1970, 00:00:00.000 GMT.
1. Add the JavaScript below to your main.js file. In this count down we will use the end of the school year, June 2nd 2020. You can countdown to any date you like.
// Countdown Timer
// The data/time we want to countdown to
var countDownDate = new Date("Jun 02, 2021 2:45:00").getTime();
Make the timer function update every second
Make the timer function update every second
Next, we make a var myfunc() function and make it run every second using the setInterval() method.
2. Add the code below, under the previous section. Notice we will be adding more code in this section!
// Run myfunc every second
var myfunc = setInterval(function() {
/* code goes here */
}, 1000)
Calculate the remaining time in days, hours, minutes, and seconds
Calculate the remaining time in days, hours, minutes, and seconds
Then, we calculate the time difference (in milliseconds) between our current date and end date. Once this difference has been found, we convert the milliseconds into days, hours, minutes, and seconds.
We are using operators in the code below, an operator is a mathematical symbol which produces a result based on two values
3. Delete /* code goes here */ . Then add the code below in that area.
var now = new Date().getTime();
var timeleft = countDownDate - now;
// Calculating the days, hours, minutes and seconds left
var days = Math.floor(timeleft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
Display the output to users
Display the output to users
Display the values for the days, hours, minutes, and seconds (that we calculated) to the users through HTML. The following code replaces HTML elements, that have their own respective IDs, with the appropriate values.
4. Add the following code under the calculating the days, hours, minutes and seconds left section and above the }, 1000).
// Result is output to the specific element
document.getElementById("days").innerHTML = days + "d "
document.getElementById("hours").innerHTML = hours + "h "
document.getElementById("mins").innerHTML = minutes + "m "
document.getElementById("secs").innerHTML = seconds + "s"
Display a message when the timer is over
Display a message when the timer is over
We also need to take appropriate action when the countdown is over. The following code clears the values of days, hours, minutes, and seconds and displays a heading when the timer is up. It also stops executing myfunc using the clearInterval method.
5. Add the code below the display the output to users section and above the }, 1000).
// Display the message when countdown is over
if (timeleft < 0) {
clearInterval(myfunc);
document.getElementById("days").innerHTML = ""
document.getElementById("hours").innerHTML = ""
document.getElementById("mins").innerHTML = ""
document.getElementById("secs").innerHTML = ""
document.getElementById("end").innerHTML = "TIMES UP!! EXPIERED";
}
Implementation
Implementation
The full code, used to implement a countdown timer in Javascript, is given below:
// The data/time we want to countdown to
var countDownDate = new Date("Jun 02, 2021 2:45:00").getTime();
// Run myfunc every second
var myfunc = setInterval(function() {
var now = new Date().getTime();
var timeleft = countDownDate - now;
// Calculating the days, hours, minutes and seconds left
var days = Math.floor(timeleft / (1000 * 60 * 60 * 24));
var hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
// Result is output to the specific element
document.getElementById("days").innerHTML = days + "d "
document.getElementById("hours").innerHTML = hours + "h "
document.getElementById("mins").innerHTML = minutes + "m "
document.getElementById("secs").innerHTML = seconds + "s "
// Display the message when countdown is over
if (timeleft < 0) {
clearInterval(myfunc);
document.getElementById("days").innerHTML = ""
document.getElementById("hours").innerHTML = ""
document.getElementById("mins").innerHTML = ""
document.getElementById("secs").innerHTML = ""
document.getElementById("end").innerHTML = "TIMES UP!! EXPIERED";
}
}, 1000);
CSS
CSS
6. Open styles.css in notepad and add the following styles.
span {
display: inline;
font-size: 40px;
font-family: Arial, Helvetica, sans-serif;
color: red;
margin-top: 0px;
}
HTML
HTML
7. Open index.html and place the following code under todays date.
<p> Count down until [place your event here]: <br>
<span id="days"></span>
<span id="hours"></span>
<span id="mins"></span>
<span id="secs"></span>
<h2 id="end"></h2>
</p>
Page updated
Report abuse