A countdown timer is an accurate timer that can be used for a website
or blog to display the count down to any special event, such as a
birthday or anniversary.
Basics of a countdown timer are :
The Valid end date and time should be a string in any of the formats understood by JavaScript’s Date.parse() method.
Step 2 : Calculate Remaining Time
First we calculate the time remaining by subtracting the deadline by current date and time then we calculate the number of days,hours,minutes and seconds.The Math.floor() function is used to return the largest integer less than or equal to a given number.
Step 3 : Output the result
In the code below the result is given as output by id=”demo”
Step 4 : Write some text if the countdown is over
If the countdown timer is over then “expired” will be displayed on the screen.
INPUT :
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
text-align: center;
font-size: 60px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var deadline = new Date("Jan 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d "
+ hours + "h " + minutes + "m " + seconds + "s ";
if (t < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
OUTPUT :
When the countdown is over
INPUT :
<!DOCTYPE HTML>
<html>
<head>
<style>
body{
text-align: center;
background: #00ECB9;
font-family: sans-serif;
font-weight: 100;
}
h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
smalltext{
padding-top: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days" id="day"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours" id="hour"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes" id="minute"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds" id="second"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<p id="demo"></p>
<script>
var deadline = new Date("dec 31, 2017 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =days ;
document.getElementById("hour").innerHTML =hours;
document.getElementById("minute").innerHTML = minutes;
document.getElementById("second").innerHTML =seconds;
if (t < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "TIME UP";
document.getElementById("day").innerHTML ='0';
document.getElementById("hour").innerHTML ='0';
document.getElementById("minute").innerHTML ='0' ;
document.getElementById("second").innerHTML = '0'; }
}, 1000);
</script>
</body>
</html>
OUTPUT :
- Set a valid end date.
- Calculate the time remaining.
- Convert the time to a usable format.
- Output the clock data as a reusable object.
- Display the clock on the page, and stop the clock when it reaches zero.
The Valid end date and time should be a string in any of the formats understood by JavaScript’s Date.parse() method.
Step 2 : Calculate Remaining Time
First we calculate the time remaining by subtracting the deadline by current date and time then we calculate the number of days,hours,minutes and seconds.The Math.floor() function is used to return the largest integer less than or equal to a given number.
Step 3 : Output the result
In the code below the result is given as output by id=”demo”
Step 4 : Write some text if the countdown is over
If the countdown timer is over then “expired” will be displayed on the screen.
INPUT :
<!DOCTYPE HTML>
<html>
<head>
<style>
p {
text-align: center;
font-size: 60px;
}
</style>
</head>
<body>
<p id="demo"></p>
<script>
var deadline = new Date("Jan 5, 2018 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days + "d "
+ hours + "h " + minutes + "m " + seconds + "s ";
if (t < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</body>
</html>
OUTPUT :
When the countdown is over
INPUT :
<!DOCTYPE HTML>
<html>
<head>
<style>
body{
text-align: center;
background: #00ECB9;
font-family: sans-serif;
font-weight: 100;
}
h1{
color: #396;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
#clockdiv{
font-family: sans-serif;
color: #fff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 10px;
border-radius: 3px;
background: #00BF96;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #00816A;
display: inline-block;
}
smalltext{
padding-top: 5px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Countdown Clock</h1>
<div id="clockdiv">
<div>
<span class="days" id="day"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours" id="hour"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes" id="minute"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds" id="second"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
<p id="demo"></p>
<script>
var deadline = new Date("dec 31, 2017 15:37:25").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =days ;
document.getElementById("hour").innerHTML =hours;
document.getElementById("minute").innerHTML = minutes;
document.getElementById("second").innerHTML =seconds;
if (t < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "TIME UP";
document.getElementById("day").innerHTML ='0';
document.getElementById("hour").innerHTML ='0';
document.getElementById("minute").innerHTML ='0' ;
document.getElementById("second").innerHTML = '0'; }
}, 1000);
</script>
</body>
</html>
OUTPUT :
How To Create A Countdown Timer Using JavaScript
Reviewed by webmission
on
21:07
Rating:
Reviewed by webmission
on
21:07
Rating:
No comments:
Post a Comment