HTML countdown timer you can copy and paste

How a timer in HTML works

A timer in HTML is three small parts working together. The HTML holds a box for each unit, days, hours, minutes and seconds. The CSS lays them out and colors them. The JavaScript reads the deadline, subtracts the current time, and writes the difference into the boxes. Then it waits until the next whole second and does it again, until the difference reaches zero.

1. The deadline is stored on the outer box as data-end, a Unix time in seconds.
2. The script works out the seconds left with Date.now() and rounds up, so the last second shows as 01 rather than 00.
3. It splits that into days, hours, minutes and seconds and pads each to two digits.
4. It schedules the next update for the start of the next second, so the display never drifts behind the clock.
5. At zero it hides the numbers, shows your end line, and stops.

The code, part by part

Every class name in the code starts with ect- and a few random letters, so two timers on the same page, or a timer on a page with its own stylesheet, never collide. The style block only styles those classes. The script is wrapped in a function that runs once, finds its own box by that class, and leaves no global variables behind.

It uses the system font of each visitor's device, so it loads no font file. The digits use tabular figures, which keeps every number the same width and stops the timer jiggling as it counts. The whole thing is a few kilobytes, and the size of yours is shown under the code.

Accessible without extra work

A timer that announces itself every second makes a page unusable with a screen reader. This one hides the ticking digits from assistive technology and keeps a separate polite live region that says the time left in words, such as "2 days, 4 hours, 15 minutes left", and changes it only when the minute changes.

A visitor who has asked their device to reduce motion does not get the ticking seconds. The CSS hides the seconds box, and the script updates once a minute instead of once a second. The four styles keep their text above the contrast the WCAG guidelines ask for.

Time zones, and changing the deadline by hand

The date and time you type are read in the time zone you pick, daylight saving included, and stored as one instant. That is why the same code counts to the same moment for every visitor. To move the deadline later, change the number in data-end. Come back here and set the new date, or work it out in a browser console: Date.parse("2027-01-01T00:00:00Z") / 1000 gives the number for midnight UTC on 1 January 2027.

Where to paste it

Anywhere a page accepts raw HTML. WordPress has a Custom HTML block, Squarespace a Code block, Webflow an Embed element and Shopify a Custom Liquid section, and a hand-written site takes it as it is. If the numbers stay at 00, the block you used removed the script: some text blocks and some hosted plans do that, and the builder's code or embed block is the one to use.

For a countdown without a website, the free online countdown timer makes the same countdown as a page of its own, with a link to share and a full screen view.

Why an HTML countdown timer cannot go in an email

Email clients do not run JavaScript. Gmail, Outlook, Apple Mail and the rest remove scripts from a message before showing it, and many remove style blocks too, so the code on this page would arrive as a row of zeros or nothing. The one thing that moves in an inbox is an animated image, which is why an email countdown is a GIF drawn by a server at the moment the email is opened.

The free email countdown timer generator makes that image and gives you the code for your email platform. A timer from the free generator works for 500 opens without an account, and for 1,000 once you sign in and claim it. The guide to countdown timers in email explains how the image behaves in each client, and two more free tools cover downloading a countdown GIF and checking a GIF before a send.