An HTML countdown timer with no bullshit

I got sick of trying to find a nice, simple, non-flash implementation, so made my own. Feel free to steal it for your own use. One very cheery way to use a countdown timer is as a life-clock, for instance the following link shows how much of my tender 30s I have left.

http://intepid.com/stuff/countdown/#d=15&m=6&y=2012&fs=40&title=countdown%20to%2040%20years%20old

Params are as follows (all are optional):

y: full year eg 2014, defaults to current
m: month (1-12), defaults to current
d: day of month (1-31), defaults to current
h: hour (0-23), defaults to 0
n: minute (0-59), defaults to 0
s: second (0-59), defaults to 0
tm: countdown seconds from page load, overrides all above time parameters
title: top line of text, defaults to nothing
until: bottom line of text, defaults to deadline date-time string
fs: font-size, affects all text, defaults to 100%
tc: text color for timer digits, defaults to black
wc: text color for timer digits during warning period, defaults to red
wp: warning period in seconds, defaults to 600 (10 minutes)

6 Responses:

  1. Scott says:

    That is very pleasing looking.

  2. mark says:

    I decided that fully self contained html hosted in an iframe made the most sense, with all params being passed as anchor text. Will probably add a few extra params for colors etc down the track :)

  3. Steven says:

    This is a great tool and very much appreciated. Quick question though. What clock is this working off because it seems as though the countdown doesn’t exactly match the date(more specifically, the time) listed.

    I loaded the page at 10:08 am EST on Nov 9, but based on the hours countdown, it seems as though it’s counting down to 6pm, not the midnight listed in the displayed time.

    countdown to 40 years old
    218:08:52:00
    Fri, 15 Jun 2012 00:00:00 UTC

    • mark says:

      The thing I specifically decided not to implement was time zone support, since they are always a nightmare (mostly because of daylight savings issues). Therefore the times must always be given in UTC/GMT, so in this example:

      10:08AM EST + 08:52
      = 7:00PM EST
      = 12:00AM GMT

  4. Patrick says:

    Hi,

    I was wondering if you guys know how to add a countdown timer in an HTML email?

    Thank you,

    Patrick

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>