Create a countdown timer to any date

Gilles Van Eylen -

Create a simple countdown timer that counts down in seconds, minutes, hours and days to any date. Here's a step-by-step guide to doing so. It only requires a bit of JavaScript, CSS and HTML.

Example

Here's a demo campaign with everything put together:

OK, that's what we want, so let's make it happen!

Step 1: Set an end date and write some text if the countdown is over

First, you need to copy this code to Look & Feel Advanced settingsJavaScript:

<script>
// The data/time we want to countdown to
var countDownDate = new Date("Jul 25, 2021 16:37:52").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 = "J-"+ days +" "
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 = "Time's up!";
}
}, 10);
</script>

Step 2: Prepare your countdown for display

Next, you'll also need to add this code in Look & Feel Advanced settings CSS:

.counter-row { 
display: flex;
justify-content: center;
color: white;
}

.counter-column {
float: left;
width: 20%;
padding: 10px;
}

.counter-row:after {
content: "";
display: table;
clear: both;
}

@media (max-width: 600px) {
.counter-column { width: 100%; }
}

.counter-row span { display: none; font-weight: bold; }

You said you wanted to change the colours of the cells? Use this code:

.counter-row .counter-column:nth-child(2n+1) { 
background: #12384a !important;
}
.counter-row .counter-column:nth-child(2n) {
background: #fba026 !important;
}

Step 3: Set up the time labels

Finally, let's add this code where you want to display your countdown:

<div class="counter-row">

<div class="counter-column" style="background-color:#aaa;"><span>DAYS</span>
<div id="days">&nbsp;</div>
</div>

<div class="counter-column" style="background-color:#bbb;"><span>HOURS</span>
<div id="hours">&nbsp;</div>
</div>

<div class="counter-column" style="background-color:#aaa;"><span>MINUTES</span>
<div id="mins">&nbsp;</div>
</div>

<div class="counter-column" style="background-color:#bbb;"><span>SECONDS</span>
<div id="secs">&nbsp;</div>
</div>

</div>

There you go!

Need some help?

Have a question or a special request? Please contact us and we will be happy to assist!