OneTaskBy Tim King · Updated
Countdown Timer Generator
Days, Hours, Minutes and Seconds Ticking to a Deadline, Then a Closing Message
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Countdown Timer works
A countdown timer shows the days, hours, minutes and seconds left until a deadline, such as the end of a sale, a product launch or an event. Enter the heading, the date and time and an end message, then copy the HTML, CSS and JavaScript.
A visible deadline gives visitors a reason to act now rather than later. It only works if the deadline is real, so set the date to when the offer truly ends and let the timer switch to its end message afterwards.
How the countdown timer keeps time
The deadline is stored in a data-deadline attribute. Once a second the script subtracts the
current time from it and splits the remainder into days, hours, minutes and seconds, so the display
never drifts even if the browser pauses the tab in the background. When the time runs out the timer
stops at zero and the heading changes to your end message.
Time zones
A date like 2027-01-01T00:00 is read in each visitor's own time zone, which suits events such as
New Year. For a single worldwide moment, such as a launch at 9am in London, add the offset:
2027-01-01T09:00Z for UTC or 2027-01-01T09:00+01:00 for British Summer Time.
FAQ
Is the countdown timer accessible?
The numbers sit in a role="timer" region with live announcements turned off, so screen readers
can read the time left when users reach it but are not interrupted every second while they browse.
Why does the timer show zeros before the script runs?
The HTML ships with placeholder zeros that the script replaces straight away. If you render the page on a server, you can write the real remaining time into the HTML to avoid the brief flash.
Can I put more than one countdown on a page?
Yes. Copy the whole timer block and change its data-deadline. The script finds every timer on the
page and runs each one on its own schedule, stopping each when it reaches zero.
Should I use a fake countdown that resets for each visitor?
No. Timers that restart on every visit mislead customers, can breach consumer protection rules in the UK and EU, and shoppers soon notice. Use a real deadline that is the same for everyone.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Stats Counter
Build a row of stats that count up when scrolled into view.
Hero Section Builder
Landing page hero sections with fluid headline and buttons.
Pricing Card Builder
Pricing plan cards with price, feature ticks, ribbon and CTA.
Animated Counter
Make a number count-up animation and copy the code.
Card Builder
Design a card component and copy its HTML and CSS.