by Robert Hashemian

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

  • 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 widget code 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 widget code (copy and paste to your Web page):

<script language="JavaScript">
TargetDate = "2034-01-31T05:00:00";
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="https://rhashemian.github.io/js/countdown.js"></script>
Here is what the user will see:



  • Countdown FAQ page.
  • You can run the script from your own site. Download countdown.js and change the script src to point to its location on your site.
  • For highest compatibility use the ISO 8601 date format for TargetDate.
  • 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:
    "2034-01-31T05:00:00-05:00". This way an accurate countdown is displayed for all users regardless of their geographic location.
  • 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 Widget?
View/Add comments

*** From hashemian.com *** see descriptions

Read Financial Markets  |   Home  |   Web Tools  |   Blog  |   News  |   Articles  |   FAQ  |   About  |   Privacy  |   Contact
Give a few Sats: 1GfrF49zFWfn7qHtgFxgLMihgdnVzhE361
paypal.me/rhashemian
© 2001-2024 Robert Hashemian   Powered by Hashemian.com