• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

Updating multi format javascript countdown

Countdown class displays (and updates) time left provided by user. Time can be provided in any time units, and they will be recalculated to specified time units. It is possible to specify which units or text will appear in countdown and which text must be hidden if certain unit reaches 0 - using format string. Fromat string also accepts HTML tags, thus providing you an ability to format your countdown as you desire.

It is also possible to provide time zone, to which specified time will be recalculated (for global, non relative events), otherwise each visitors timezone will be used..

Package contains countdown.js and countdown.packed.js (packed javascript), and 2 examples: simple_example.html(simple countdown useage) and example.html (to demonstrait format possibilities).



Example codes

<style type='text/css'>
    color: blue;
    font-size: 18px;
<div id='seconds'></div>
<div id='countdown'></div>
<script src="./countdown.packed.js" type="text/javascript"></script>
var cd = new countdown("countdown", {
        year: 0, //years left
        month: 1, //months left
        week: 0, //weeks left
        day: 0, //days left
        hour: 0, //hours left
        min: 0, //minutes left
        sec: 5, //seconds left
        //format how countdown will look
        format: "[{y} years] [{m} months] [{w} weeks] [{d} days] {h}:{i}:{s}",
        end: "Countdown Ended", //text that will appear after end of countdown
        hide_zeros : true, // hide highest units that reached 0
        leading_zeros: true, //show leading zeros for hours minutes and seconds
        timezone: 3, //recalculate relative to timezone (default - visitors default timezone)
        //callback function which is called every second and tells how meny seconds are left
        onstep: function(sec){document.getElementById("seconds").innerHTML = sec;},
        onend: function(){alert("ended")} //callback function when countdown ended

Examples in action

Example scripts provided with package in action:

Method list


Back to method list

Method namenew countdown(id, config)
DescriptionCreates class instance with provided configuration
Input parameters

string id - ID of element where to create countdown

json config - json structure with configuration:

  • int year - how many years have left till countdown ends (default: 0)
  • int month - how many months have left till countdown ends (default: 0)
  • int week - how many weeks have left till countdown ends (default: 0)
  • int day - how many days have left till countdown ends (default: 0)
  • int hour - how many hours have left till countdown ends (default: 0)
  • int min - how many minutes have left till countdown ends (default: 0)
  • int sec - how many seconds have left till countdown ends (default: 0)
  • string end - text which will appear when countdown ends (default: '')
  • string format - format how countdown should look like. In {} brackets you need to specify only one letter:
    • s - for seconds
    • i - for minutes
    • h - for hours
    • d - for days
    • w - for weeks
    • m - for months
    • y - for years

    if you do not want, for example month to appear in countdown, don't provided, all units will be automatically recalculated and months will be displayed as weeks and days

    Text that appears in [] square brackets, will be hidden if hide_zeros is set to true and when unit that also appears in same brackets will reach zero, For example, if you want text 'years' to disappear when year reaches zeros, then provide [{y} years]

    Format is a way to manipulate how countdown will look, which units will be displayed, with what text and which text should be hidden with each unit. You don't have to use all time units, you don't have to provide text, simplest thing you can pass is '{s}' which will display only number of seconds left. Format string also accepts HTML tags.

    (default: [{y} years] [{m} months] [{w} weeks] [{d} days] [{h}:][{i}:]{s})

  • bool hide_zeros - hide highest units that have reached zero, for example hides '0' years in '0 years 2 days 3 hours 4 secons' (default: 'true')
  • bool leading_zeros - display leading zeros for hours, minutes and seconds, when their value < 10 (default: 'true')
  • int timezone - recalculate time acrodingy to provided timezone offset in hours (default: uses visitors timezone)

    For example if you want to create a countdown towards Christmas, then don't provide timezone, each visitor will be displayed it's own time towards it's own Christmas. But if you want to provide countdown towards Chirstmas in New York, you need to provide New York's timezone, so for each visitor's timezone, time will be recalculated

  • function onstep - callback function which is called every second and provides how many seconds is left (till countdown end) as function parameter
  • function onend - callback function which is called when countdown is ended

Latest changes

None for now

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Try it out and Rate on


JS classes support forum or comments below

You may also be interested in:

Powered by

blog comments powered by Disqus