Countdown Timer

Want to add a simple countdown timer to your Webflow website?

Firstly, add this custom code to the </body> section of either the website, or just the page you want the timer on.

<script>
// Countdown Target Date
var countDownDate = new Date("December 31, 2021 00:00:00").getTime();
var x = setInterval(function() {

// Today's Date vs Target Date
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
   
// Calculated Output to Elements
document.getElementById("day").innerHTML = days;
document.getElementById("hour").innerHTML = hours;
document.getElementById("minute").innerHTML = minutes;
document.getElementById("second").innerHTML = seconds;

     // Output Text
   if (distance < 0)
   {
    clearInterval(x);
     document.getElementById("announcement").innerHTML = "Merry Christmas!";
   }
}, 1000);
</script>

The only thing you'll want to change is the date that the countdown timer is counting down to, and the text for when the timer is up at the end of the custom code.

Next you'll want to select text on your page to use for the timer and for when the timer is up. You'll want to add id's to the text elements you are using for the timer, so select the text that you want to change, and add these id's: day, hour, minute, second, and also announcement for the text that will show once the timer is done. The announcement text will be hidden until the timer is up.