86K Webflow Domain List
NEW

Countdown timer

Example

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

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

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.

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.

Outline Stroke Text

Timothy Ricks
EXPERT
3

Add an outline (stroke) effect to text elements on your Webflow site with this CSS code snippet.

Reading Time Blog/Article Page

Corey Moen
EXPERT
1

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.

Randomize button text on click

Corey Moen
EXPERT
2

This allows you to randomize the text on a button click in Webflow. A fun way of displaying a variety of different texts when a user clicks on a button on your Webflow page.

Show/Hide Based on Date or Time

Corey Moen
EXPERT
3

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.

Typewriter text effect

Nikolai Bain
EXPERT
2

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.

Customize Text Selection Color

Corey Moen
EXPERT
4

Customize the color of the highlight when a user selects text on your Webflow site with this simple CSS script.

DRAG
Real-time sorting by

More from author

See all

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

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

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.

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

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.

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.

DRAG
Real-time sorting by