by Robert Hashemian

JavaScript Countdown/Count-up FAQ

This FAQ page covers some of the most often asked questions about the
Javascript Countdown/Countup Clock.

Q1- How can I change the font type and/or size of the countdown?
Q2- How do I reset the clock and count up with every page view?
Q3- How does the UTC time work?
Q4- Can I download the script to and call it from my own server? Can I modify it?
Q5- How do I use my server clock for the current time instead of relying on client's browser?
Q6- How can I set the clock with every page visit to countdown for a defined period of time?
Q7- How can the user be redirected to another page when the countdown reaches 0?
Q8- How can I modify the code to display singular units (e.g. Day) instead of plural units (e.g. Days) when the count is 1?
Q9- The counter starts with 'Days'. How can I display 'Weeks', 'Months' and 'Years'?
Q10- I can't get the counter to run in Myspace or Facebook. Why?
Q11- I don't want to display seconds or minutes. How?

Q1- How can I change the font type and/or size of the countdown?
A- A common way is to wrap the last line of the script in a <SPAN> tag and style as desired. For example, to use the Verdana font with a 20-pixel size use the following:
<span style="font-family:verdana;font-size:20px">
<script language="JavaScript" src="https://rhashemian.github.io/js/countdown.js"></script>
</span>

Q2- How do I reset the clock and count up with every page view?
A- Set TargetDate to current date and set CountStepper to "1" as follows:
TargetDate = new Date();
CountStepper = 1;


Q3- How does the UTC time work?
A- If your target date signifies an event at a certain location, you should append your UTC (Coordinated Universal Time) to your date. UTC is also referred to as GMT (Greenwich Mean Time). See Wikipedia article on UTC.
The UTC time is never adjusted so if you are in a Daylight savings zone, time changes could complicate matters. For example The US northeast is 5 hours behind UTC in standard time and 4 hours behind UTC in daylight savings time.
So if you are hosting an event in northeastern United States on July 11, 2015 at 4 PM, you would specify "07/11/2015 4:00 PM UTC-0400", as that region is generally under daylight savings during that time. Alternatively you could specify "07/11/2015 4:00 PM EDT". In this case EDT is used to indicate Eastern Daylight Time, rather than EST (Eastern Standard Time).

Q4- Can I download the script to and call it from my own server? Can I modify it?
A- Feel free to download and use the script from your own URL. Here's the link:

  • rhashemian.github.io/js/countdown.js

  • You can modify the code in any way you want. Credit to this site is appreciated, and no malicious code please.

    Q5- How do I use my server clock for the current time instead of relying on client's browser?
    A- Using server time has some advantages. It obviates the use of the client's clock which might not be accurate. Time zone and daylight savings issues are also avoided. However, server resources must be used to set the current time dynamically every time the page is accessed. You would need access to server-side scripting to make that possible.
    The quickest way to achieve this is to change your page extension to a server-processed one (such as .php, .asp, .aspx, .jsp, etc.) that your server supports.
    You would need to download countdown.js, incorporate it into your page, and modify one line. the line to change is towards the end of the script where "dnow" is declared as:
    var dnow = new Date();

    For example, in PHP you would use:
    var dnow = new Date("<?= strftime('%c') ?>");

    In ASP (JScript) you would use:
    var dnow = new Date("<%= new Date() %>");

    If your server supports SSI, then you can declare the following:
    var dnow = new Date("<!--config timefmt='%c' --><!--echo var='DATE_LOCAL' -->");

    Q6- How can I set the clock with every page visit to countdown for a defined period of time?
    A- If hh represents the hours, mm represents the minutes and ss represents the seconds for the period the clock should count down with every visit, set TargetDate as follows:
    TargetDate = new Date().valueOf() + hh*3600000 + mm*60000 + ss*1000;

    You can skip the time units that are not desired. For example to count down 2 minutes and 30 seconds every time somebody views your page, you would specify:
    TargetDate = new Date().valueOf() + 2*60000 + 30*1000;

    Q7- How can the user be redirected to another page when the countdown reaches 0?
    A- Suppose you wanted to redirect the user to example.com after the timer has run out. There are 3 ways to accomplish this task.
    the most obvious and best way is to add a meta refresh tag to your page's <head> section after the TargetDate has passed. The refresh tag syntax is like so:

    <meta http-equiv="refresh" content="0; url=https://www.example.com/">;
    

    Another way is to download the js file, source it from your own location, and modify the top part of the "CountBack(secs)" function like so:

    if (secs < 0) {
      location.href="https://www.example.com/";
    }
    

    Finally, you can set FinishMessage to a desired value. For example:

    FinishMessage = "Done!";
    

    Then add the following code somewhere in your page (perhaps right after the countdown script block), specifying the same string value as FinishMessage, like so:

    <script defer="true" language="JavaScript">
    RedirYet();
    function RedirYet() {
      if (document.getElementById("cntdwn").innerHTML=="Done!")
        location.href="https://www.example.com/";
      setTimeout(RedirYet, 250);
    }
    </script>
    

    The script checks to see if FinishMessage is being displayed, and if so, it redirects the page to the desired location.

    Q8- How can I modify the code to display singular units (e.g. Day) instead of plural units (e.g. Days) when the count is 1?
    A- There are a number of approaches to accomplish this, but at this time, they all involve downloading and modifying the countdown script. Here's one quick solution that involves changing the CountBack function. This is not a robust solution, just a simple and quick one.

    Download Countdown.js, be sure to reference this copy in your "<script src=...>" line, change the 4 lines that alter the "DisplayStr" variable to the following 8 lines:

      DisplayStr = DisplayFormat.replace(/%%D%%/g, ReplaceStr=calcage(secs,86400,100000));
      if (ReplaceStr=="<b>01</b>") DisplayStr=DisplayStr.replace(/(day)s/ig, "$1");
      DisplayStr = DisplayStr.replace(/%%H%%/g, ReplaceStr=calcage(secs,3600,24));
      if (ReplaceStr=="<b>01</b>") DisplayStr=DisplayStr.replace(/(hour)s/ig, "$1");
      DisplayStr = DisplayStr.replace(/%%M%%/g, ReplaceStr=calcage(secs,60,60));
      if (ReplaceStr=="<b>01</b>") DisplayStr=DisplayStr.replace(/(minute)s/ig, "$1");
      DisplayStr = DisplayStr.replace(/%%S%%/g, ReplaceStr=calcage(secs,1,60));
      if (ReplaceStr=="<b>01</b>") DisplayStr=DisplayStr.replace(/(second)s/ig, "$1");
    
    The variable "ReplaceStr" is used to store the value of each unit. After the value is inserted into "DisplayStr", "ReplaceStr" is checked and if it's equivalent to "<b>01</b>", indicating 1 unit, the corresponding unit in "DisplayStr" is modified by dropping its "s" suffix, thereby rendering it as singular rather than its default plural form.

    Q9- The counter starts with 'Days'. How can I display 'Weeks', 'Months' and 'Years'?
    A- As long as the desired units are constant multiples of 'Seconds', the code running the counter can work in a straight-forward manner. To that end, it takes a simple modification to the program to display the number of 'Weeks'. There just hasn't been enough demand to display the number of weeks, thus it isn't included in the counter.

    Things get relatively complicated for displaying 'Months'. Months contain varying number of days. Some are 30 days, others are 31. February is even worse, containing 28 days with an additional day every 4 years (leap years). It's not impossible to calculate it, but it is involved and it's departure from a simple calculation, putting stress on the computer resources. Displaying the number of 'Years' would be less onerous, but there are still leap years to contend with. In contrast, a century is always a constant 36,525 days, but I doubt anyone would want to display that in a counter.

    To make matters even more complicated, there are a variety of month and year lengths in different cultures. One such example is lunar years and months which are shorter than their solar counterparts.

    So for the sake of simplicity (and my own laziness), the counter will continue to start with 'Days'.

    Q10- I can't get the counter to run in Myspace or Facebook. Why?
    A- This counter is a client-side JavaScript running on a Web page. Some social sites, forums, or blogging sites may not allow unapproved scripts to be inserted into pages. They may remove them or make alterations, rendering them inactive. Unfortunately little can be done about that. These sites are rightfully trying to prevent malicious code from running on their pages and they don't have the resources to separate harmless scripts from the harmful ones. You can ask them to relax their policies or make certain exceptions, but that's a long shot.

    Q11- I don't want to display seconds or minutes. How?
    A- Just eliminate the corresponding parameters from the 'DisplayFormat' variable. For example, use the following format if you don't want to show minutes and seconds.
    DisplayFormat = "%%D%% Days, %%H%% Hours.";


    Back to Javascript Countdown/Countup Clock.

    *** 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