Dynupdown

About

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".

Example

Countdown with Years & Months

Countup with Years & Months

Countup with Weeks

Countup with Days

Using

First put

<script src="dynupdown.js"></script>

in the 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.".
• countername - The id for the span automatically 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>

Download

To download Dynupdown just right-click and choose "Save As" (or the equivalent for your device/web browser).