Countdown timer
Add a countdown timer to your Webflow site with this simple Javascript snippet. Want to display a countdown timer to a time of your choosing on your Webflow site? Now you can easily add one with this Javascript snippet.
Add a countdown timer to your Webflow site with this simple Javascript snippet. Want to display a countdown timer to a time of your choosing on your Webflow site? Now you can easily add one with this Javascript snippet.
How to add it
- Add to the closing body tag of your custom code settings
- Update element ID to your element ID of your text element you want to display the countdown
- Add day for the day text element ID
- Add hour for the hour text element ID
- Add the minute for the minute text element ID
- add the second for the second text element ID
- Finally add the announcement message for the expired text message that shows after the event has taken place
The code
Javascript
<!-- Add to body closing tag -->
<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>
