Webflow sync, pageviews & more.
NEW

Countdown timer

Example

Countdown timer

Description

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.

Instructions

  1. Add to the closing body tag of your custom code settings
  2. Update element ID to your element ID of your text element you want to display the countdown
  3. Add day for the day text element ID
  4. Add hour for the hour text element ID
  5. Add the minute for the minute text element ID
  6. add the second for the second text element ID
  7. Finally add the announcement message for the expired text message that shows after the event has taken place

Javascript snippet

Copy

<!-- 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>

CSS snippet

Copy

HTML snippet

Copy
Nikolai Bain

Nikolai Bain

expert
7
6
0
6
Get it
Like
Like

Snippet tags

Time
Text
Count
Javascript
Flowradar
Code snippets
Countdown timer

Related code snippets

Go to snippets
Truncate multi-line text with Ellipse

Truncate multi-line text with Ellipse

Corey Moen
EXPERT
3

Do you want consistency with your Webflow designs? Truncate multi-line texts with ellipses based on 2 or 3 lines of your choosing via CSS. This helps keep your designs uniformed without needing to set max height limitations by truncating text that goes beyond a certain length.

Single Line Truncate Text

Single Line Truncate Text

Corey Moen
EXPERT

Automatically truncate text that goes beyond a line on your Webflow site with this simple CSS script. This helps create uniformed design on your site by truncating text with ellipsis if they go beyond a single line.

Reading Time Blog/Article Page

Reading Time Blog/Article Page

Corey Moen
EXPERT
2

Display the reading time associated with a blog or article on your Webflow site with this Javascript code. With this code you'll be able to easily add a reading time to all of your blogs or articles on your Webflow site.

Split Text into Lines

Split Text into Lines

Timothy Ricks
EXPERT
4

Easily split text into lines based on lines, words, characters on your Webflow site. A great way to add interactions based on your own specifications to text on your Webflow site.

Show/Hide Based on Date or Time

Show/Hide Based on Date or Time

Corey Moen
EXPERT
4

This allows you to show or hide items based on date or time in Webflow. This is great for event based information, you can display various elements based on if its prior to a time or after a specified time on your Webflow site.

Number of CMS Item Count

Number of CMS Item Count

Timothy Ricks
EXPERT
3

A simple way of displaying the number of CMS items on a page in Webflow. If you ever wanted to add a CMS item count on a page this script will allow you to easily display the total number of items shown.

Count Up Numbers on Page Scroll

Count Up Numbers on Page Scroll

Corey Moen
EXPERT
4

Add count up numbers on page scroll to your Webflow site via this Javascript code. This method allows you to add a count up numbers via a page scroll to your Webflow site. As the user scrolls down numbers start to count up as they enter the viewport.

Force Links to Inherit Parent Font Color

Force Links to Inherit Parent Font Color

Timothy Ricks
EXPERT
4

Force your Webflow site links to inherit the parent font color with this simple CSS code snippet. This makes it easier for you to manage your link color on Webflow.

DRAG
Real-time sorting by

More from author

See all
Countdown timer

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.

Custom Slider Dot Color

Custom Slider Dot Color

Easily change the native Webflow slider element navigation/dot colors with this CSS snippet. This method allows you to easily select the colors of Webflow's native slider dots via a CSS code snippet.

Shadow navbar on Scroll

Shadow navbar on Scroll

Emphasize your navbar by adding a shadow on page scroll for your Webflow site. This effect you can use via interactions although an easier way is to add a simple Javascript snippet instead. The code makes it so that if a user hasn't scrolled then no shadow will be visible. When a user scrolls your shadow effect will then be added.

Glassy Background Effect

Glassy Background Effect

Add a blurry-background effect to your Webflow site divs with this custom CSS. This effect adds an Apple style blurry background effect via a simple CSS code snippet to any div of your choosing.

Typewriter text effect

Typewriter text effect

A common hero/header section typewriter text effect for your Webflow site. This allows you to add a typewriter effect to any area that you wish to add a text effect to via this Javascript snippet.

Fade Non-Active Elements

Fade Non-Active Elements

This simple CSS code snippet allows you to fade items that are not currently hovered on your Webflow site. This is perfect for navbars or other elements that you want to emphasize the hover state on without building unique hover states or using interactions.

DRAG
Real-time sorting by