This is a project I created many years ago, and haven't touched in about 11 to 14 years. It's mainly here for posterity, but if you still find it useful (and if it still works) then by all means feel free to make use of it. Any references to "6 times 9" are because that is the retired website where I was previously hosting things like this.
A dynamic countup and countdown timer with numerous noteworthy features:
- Multiple different timers can appear on the same page.
- Can be set to count down to a date, count up from it, or count down and then change to count up after it passes.
- Year, month, day, hour, minute, and second can be specified and are displayed in the counter.
- Can handle annual events; it will automatically update its working year.
- Text can be specified to appear before and after the counter.
- It can be set to not display times that are zero (i.e. "0 years, 1 month, etc." will become just "1 month, etc.").
- You can set the largest unit to be days, weeks, or years. Importantly, when set to show years it will calculate it using the same logic that a human would (by looking at the relative calendar dates, rather than the literal amount of time between them) which greatly increases the accuracy.
- The CLASS of the
<span>changes when the time is reached, allowing for a distinct style for an elapsed timer.
- Supports arbitrary singular and plural names for the time periods (but this does involve slightly more in-depth code editing than just setting up a counter, unfortunately), which allows for languages that don't make plurals by simply adding an "s".
Countdown with Years & Months
Countup with Years & Months
Countup with Weeks
Countup with Days
head section, and then place
<script>start_counter(hour, minute, second, month, day, year, direction, beforetext, aftertext, eventname, compact, countername, notyears)</script>
wherever you want a timer to appear, editing it as appropriate. The configuration values are:
hour- The hour of the target event in 24-hour format (3am=3, 3pm=15, etc.). Entered as just a number with no quotation marks.
minute- The minute of the target event (0 to 59). Entered as just a number with no quotation marks.
second- The second of the target event (0 to 59). Entered as just a number with no quotation marks.
month- The month of the target event (January=1, February=2, etc.). Entered as just a number with no quotation marks.
day- The day of the month of the target event (1 to 28, 29, 30, or 31 depending on the month). Entered as just a number with no quotation marks.
year- The year of the target event with all four digits (i.e. 1999 not 99). If you wish to have an annual event, enter "all" (with quotation marks) instead of a number.
direction- The direction of the counter: "down" for countdown, "up" for countup, or "switch" to countdown then up (all with quotation marks).
beforetext- The text to appear before the counter, enclosed in quotation marks and without a final space (i.e. "There is" not "There is ").
aftertext- The text to appear after the counter, enclosed in quotation marks and without a leading space (i.e. "until the event" not " until the event").
eventname- The name of the event, to be displayed after the time has elapsed, enclosed in quotation marks. It will be followed by " has passed", so set something like "The event" not "The event has passed".
compact- Whether or not to hide periods that are zero. Can be "yes", "no", or "strict" (all with quotation marks). With "yes", "0 years, 1 month, 0 days, 1 minute, etc." will become "1 month, 0 days, 1 minute, etc."; with "strict" "0 years, 1 month, 0 days, 1 minute, etc." will become "1 month, 1 minute, etc.".
spanautomatically generated by the script for the output. This must be different for each counter on a page.
notyears- Added in version Bravo, updated in version Delta. Set as 0 for "Years, Months, Days, Hours, Minutes, Seconds" (Example "Countup with Years & Months" above), set as 1 for "Days, Hours, Minutes, Seconds" (Example "Countup with Days" above), set as 2 for "Weeks, Days, Hours, Minutes, Seconds" (Example "Countup with Weeks" above).
For example, the countdown to New Year's Day in the "Example" section above was generated using
<script>start_counter(0, 0, 0, 1, 1, "all", "down", "", "to the next New Year's Day.", "New Year's Day", "yes", "newyear", 0)</script>
and the first countup from the year 2000 was generated using
<script>start_counter(0, 0, 0, 1, 1, 2000, "up", "", "since the turn of the century.", "2000", "yes", "century", 0)</script>
To download Dynupdown just right-click and choose "Save As" (or the equivalent for your device/web browser).