JavaScript Countdown/Count-up Timer/Clock/Ticker for Web Pages

JavaScript Countdown/Count-up Timer/Clock/Ticker for Web Pages
Cost-free and advertising-free. But a link to this page is appreciated.
Note: This service comes with NO GUARANTEES. No liability is assumed.

A free and simple JavaScript countdown/Count-up timer/clock/ticker to/from the target date and time of your choice. Just copy and paste to your Web pages. You can also customize the display format, foreground and background colors of the countdown timer.

You can omit most parameters. Default values will be used in that case. CountActive is used to enable to disable counting. If you only want to show a fixed static time-remaining message, set it to false. It'll save on browser resources.

DisplayFormat allows you to format the countdown/Count-up display to your liking. For example, instead of the default English, you can use terms from your own language, or make any other desired adjustments, like omitting the Seconds segment.

Use FinishMessage to display a desired message (or nothing, i.e. ""), when countdown reaches zero. Obviously never displayed when counting up.

CountStepper specifies the step value or period (in seconds) for the counter. Use positive number for counting up, negative number for counting down. Value is rounded up to next integer. When specifying positive (count up), be sure to specify past TargetDate, otherwise only the finish message is displayed.

Single digits are displayed with leading zeros, unless LeadingZero is set to false.

Here's the simple JavaScript countdown/count-up code (copy and paste to your Web page):

<script language="JavaScript"> TargetDate = "12/31/2020 5:00 AM"; BackColor = "palegreen"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "It is finally here!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>

Here is what the user will see:

Countdown FAQ page.

Please consider putting the script on your own site and save me from high usage warnings. Download countdown.js and change the script src to point to its location on your site.

Since this countdown/count-up runs on the client browser, it's best to append to the target date the appropriate UTC (Universal Time Coordinates) offset for the location of your event.
For example, if the sample code above is for US Eastern Standard Time, you'd specify TargetDate as:
"12/31/2020 5:00 AM UTC-0500". This way an accurate countdown is displayed for all users regardless of their geographic location. Thanks to Justin Carter for the tip.

Mun Rashid has modified the JavaScript code by using object wrapping to allow for multiple countdowns on one page. Download Mun's JavaScript code here. Download the sample HTML here.

Tilesh Khatri has written a simplified script based on the countdown code that displays multiple clocks on one page. Download the HTML.

To reset the clock and count up with every page visit set TargetDate to "new Date();" and CountStepper to "1". This will effectively show visit duration. Leave out the double-quotes.

Have a comment about the JavaScript Countdown/Count-up Timer?

View/Add comments

*** FREE from hashemian.com *** see descriptions

JavaScript Countdown/Count-up Timer/Clock JavaScript Web Page Load Time JavaScript Web Page Commenting JavaScript Visitor IP Address/Host
HTML Form Submission Tool Email/String Encoder/CAPTCHA Hit Counter; Page Counter Connection Probe
Reverse Whois Browser Simulator/emulator My IP Address, Whoami Whois
Mail Exchanger (MX Record) Lookup Search Engine Rankings JavaScript Thousand Separator Windows File Search Utility
Atomic Clock/Current Time Short/Small URLs Atomic Fortune Teller Port Scanner
Generate Password Google/Yahoo Maps Web Page Load Timer Ping
HTML, URL, Decimal Encoding/Decoding Form Post Tester/Viewer Web Scratchpad/Notepad/Clipboard RSS/ATOM Web Widget
HTML/CSS Color Test