Below is all the code you need to build a great looking countdown timer that can redirect to a different page after the timer expires.
There are two variations.
In the first code snippet the countdown timer will countdown to a specific date that you set in the Javascript code. Once the date is reached the visitor is redirected.
In the second snippet the countdown timer countdown from a specific amount of time. Once the timer ends the visitor will be redirected.
There are also a variety of ways you can include the necessary code on the page. By far the easiest way is to put the HTML and the Javascript directly into a WordPress post and then add the CSS where necessary in your them. That’s the way we’ll do in this example.
Here’s a video walking you through the code and how to use it:
The HTML
Copy and paste the HTML below into a new or existing WordPress post.
<div class="countdown-wrap">
<div id="clockdiv">
<div><span class="time-label">DAYS</span></div>
<div><span class="time-label">HOURS</span></div>
<div><span class="time-label">MINUTES</span></div>
<div><span class="time-label">SECS</span></div>
</div>
</div>The JavaScript
Copy and paste the JavaScript that you want to use right below the HTML in the post. You can also paste the JavaScript into the functions.php file and have it appear just on the page with the countdown timer. But you have to do this properly so you don’t break your site, here’s how. You can add both JS and CSS using this tutorial.
Countdown to a specific date
<script type="text/javascript">
var deadline = 'March 2 2018 12:41:39 GMT+0200';
function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
console.log(t);
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime){
var clock = document.getElementById(id);
function updateClock(){
var t = getTimeRemaining(endtime);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if(t.total<=0){
// Redirect if the Countdown is Over
window.location.href="https://www.google.com";
}
}
updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock,1000);
}
initializeClock('clockdiv', deadline);
</script>Countdown from a specific amount of time
<script type="text/javascript">
var timeInMinutes = 10;
var currentTime = Date.parse(new Date());
var deadline = new Date(currentTime + timeInMinutes*60*1000);
function getTimeRemaining(endtime){
var t = Date.parse(endtime) - Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60 );
var minutes = Math.floor( (t/1000/60) % 60 );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var days = Math.floor( t/(1000*60*60*24) );
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
function initializeClock(id, endtime){
var clock = document.getElementById(id);
function updateClock(){
var t = getTimeRemaining(endtime);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if(t.total<=0){
// Redirect if the Countdown is Over
window.location.href="https://www.google.com";
}
}
updateClock(); // run function once at first to avoid delay
var timeinterval = setInterval(updateClock,1000);
}
initializeClock('clockdiv', deadline);
</script>The CSS
Here are three different CSS designs.
The “Alarm Clock” look
/************ Timer Styles *************/
.countdown-wrap:before {
content: "";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
display: block;
position: absolute;
top: 50%;
transform: translate(0,-50%);
left: -10px;
}
.countdown-wrap {
width: 100%;
max-width: 465px;
margin-left: auto;
margin-right: auto;
position: relative;
}
div#clockdiv {
text-align: center;
background: #222;
background-image: -webkit-linear-gradient(top, #222, #333, #333, #222);
background-image: -moz-linear-gradient(top, #222, #333, #333, #222);
background-image: -ms-linear-gradient(top, #222, #333, #333, #222);
background-image: -o-linear-gradient(top, #222, #333, #333, #222);
border: 1px solid #111;
border-radius: 5px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.6);
margin: auto;
padding: 24px 0 17px;
}
.countdown-wrap:after {
content: "";
width: 8px;
height: 65px;
background: #444;
background-image: -webkit-linear-gradient(top, #555, #444, #444, #555);
background-image: -moz-linear-gradient(top, #555, #444, #444, #555);
background-image: -ms-linear-gradient(top, #555, #444, #444, #555);
background-image: -o-linear-gradient(top, #555, #444, #444, #555);
border: 1px solid #111;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
display: block;
position: absolute;
top: 50%;
transform: translate(0,-50%);
/* top: 48px; */
right: -10px;
}
div#clockdiv > div > span:nth-child(1) {
width: 92px;
max-width: 92px;
font: bold 48px 'Droid Sans', Arial, sans-serif;
text-align: center;
color: #111;
background-color: #ddd;
background-image: -webkit-linear-gradient(top, #bbb, #eee);
background-image: -moz-linear-gradient(top, #bbb, #eee);
background-image: -ms-linear-gradient(top, #bbb, #eee);
background-image: -o-linear-gradient(top, #bbb, #eee);
border-top: 1px solid #fff;
border-radius: 3px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.7);
margin: 0 7px;
padding: 18px 0;
display: inline-block;
position: relative;
}
div#clockdiv > div {
display: inline-block;
width: 92px;
}
div#clockdiv > div > span:nth-child(1):before {
content: "";
width: 100%;
height: 13px;
background: #111;
display: block;
padding: 0 3px;
position: absolute;
top: 41%;
left: -3px;
z-index: -1;
}
div#clockdiv > div > span:nth-child(1):after {
content: "";
width: 100%;
height: 1px;
background: #eee;
border-top: 1px solid #333;
display: block;
position: absolute;
top: 48%;
left: 0;
}
span.time-label {
font: bold 15px 'Droid Sans', Arial, sans-serif;
color: #f47321;
text-shadow: 1px 1px 0px #000;
text-align: center;
text-transform: uppercase;
display: inline-block;
margin-top: 9px;
}Stacked Boxes look
/*********** Timer CSS ********/
.countdown-wrap {
width: 100%;
text-align:center;
}
#clockdiv {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: 75%;
max-width: 20rem;
margin: 0 auto;
}
#clockdiv > div {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
min-width: 31%;
margin-bottom: 1rem;
}
#clockdiv > div:nth-child(1) {
-webkit-box-flex: 1;
-ms-flex: auto;
flex: auto;
width: 100%;
font-size: 2.75em;
}
div#clockdiv > div > span:nth-child(1) {
padding: .25em;
background-color: white;
border: 1px solid black;
border-radius: 3px;
font-weight: bold;
font-size: 2em;
}
.time-label {
font-size: 1em;
padding-top: .40em;
}
The End Of The World Look
@import 'https://fonts.googleapis.com/css?family=Bangers';
/************ Timer Styles *************/
div#clockdiv {
text-align: center;
font-family: Bangers;
color: white;
font-size: 30px;
letter-spacing: 2px;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
max-width: 500px;
margin-left: auto;
margin-right: auto;
text-align:center;
}
div#clockdiv:before {
content: "The world might end in...";
width: 100%;
margin-bottom: 21px;
}
.countdown-wrap {
width: 100%;
}
div#clockdiv > div {
font-size: 80px;
width: 25%;
color: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.days, .hours, .minutes, .seconds {
margin-bottom:20px;
}
span.time-label {
font-size: 40px;
color: red;
}
5 thoughts on “Countdown Timer – Custom Built Using HTML, Javascript, and CSS”
Thanks
You’re welcome, thanks for dropping by!
hi
how to speed up this timer to count one day in 3 min
This is great, thanks. I’m glad my friend directed me here..
From a nontechie background, so this may be too basic:
where in the CSS code can one change the background color from black to gray?
in the “Countdown from a specific amount of time”, does this apply to the situation where I want to activate the timer when someone clicks on a link (to the webpage that has the timer) and then redirects after a XX hours. Basically, a deadline timer? Where should be tweak the code for something like this.
Hi David,
Thanks for stopping by!
In the CSS code whenever you see “background:” or “background-color:” followed by a color word (like red or green) or a number preceded by a # (like #444 or #ececec) or “rgb”, that is the background color. Change the color word, the hex code (the one with the #) or the rgb and you’ll change the color.
If you Google “CSS colors” or “color hex codes” you’ll find lots of resources helping you find the perfect color and the code required for it.
For the second part of your question, the “Countdown from a specific amount of time” will reset to the time you’ve set in the code every time the page is reloaded.
This may be useful if your timer only goes for 5 seconds and then redirects, but it’s less useful if you have a longer countdown where people may leave the page in the meantime.
If you want every person who lands on the page to have a 1-hour deadline and you want the page to “remember” the time left and if they’ve gone past the deadline you need to use cookies. It’s easiest to use Javascript on that page to place a cookie in that visitor’s browser. That cookie keeps track of how much time has gone by if they leave the page. Then when they come back to the page the clock will update appropriately based on information in the cookie. If the visitors clears their cache and cookies in the meantime or if their browser doesn’t accept cookies, this won’t work.
To make that happen check out this codepen: https://codepen.io/ProfessorSamoff/pen/xqXrgx
I hope that helps 🙂 Let me know if you have any further questions. Thanks for stopping by!