countdownCube

Example 1

      $('#counter').countdownCube( {
        target: '2026-10-01T11:00Z',
        cubeSize: 150,
        background:  '#ffff00',
        color: 'blue',
        } );
LO
1
1
1
1
1
years
AD
5
5
5
5
5
months
IN
29
29
29
29
29
days
G.
9
9
9
9
9
hours
..
13
13
13
13
13
minutes
...
11
11
11
11
11
seconds

Example 2

      $('#counter-days-only').countdownCube( {
        target: '2026-10-01T11:00Z',
        cubeSize: 150,
        background:  'plum',
        color: 'red',
        labelsTranslations: {'year': 'anni',
                             'month': 'mesi',
                             'day': 'giorni',
                             'hour': 'ore',
                             'minute': 'minuti',
                             'second': 'secondi'
                             },
        showDaysOnly: true,
        } );
LOAD
547
547
547
547
547
giorni
ING.
9
9
9
9
9
ore
....
13
13
13
13
13
minuti
....
10
10
10
10
10
secondi

Example 3

Timezone support can be added with the moment.js and moment-timezone.js libraries.

      $('#counter-timezone-default').countdownCube( {
        target: '2026-10-01T11:00',
        cubeSize: 150,
        background:  'azure',
        color: 'forestgreen',
        } );
    
      $('#counter-timezone-new-york').countdownCube( {
        target: '2026-10-01T11:00',
        targetTimezone: 'America/New_York',
        cubeSize: 150,
        background:  'azure',
        color: 'green',
        } );
    
      $('#counter-timezone-los-angeles').countdownCube( {
        target: '2026-10-01T11:00',
        targetTimezone: 'America/Los_Angeles',
        cubeSize: 150,
        background:  'azure',
        color: 'chartreuse',
        } );

UTC

LO
1
1
1
1
1
years
AD
5
5
5
5
5
months
IN
29
29
29
29
29
days
G.
9
9
9
9
9
hours
..
13
13
13
13
13
minutes
...
10
10
10
10
10
seconds

New York

LO
1
1
1
1
1
years
AD
5
5
5
5
5
months
IN
29
29
29
29
29
days
G.
14
14
14
14
14
hours
..
13
13
13
13
13
minutes
...
10
10
10
10
10
seconds

Los Angeles

LO
1
1
1
1
1
years
AD
5
5
5
5
5
months
IN
29
29
29
29
29
days
G.
17
17
17
17
17
hours
..
13
13
13
13
13
minutes
...
10
10
10
10
10
seconds

Example 4

If the built-in Date is used then the local time of the browser is inferred and the timezone argument is effectively ignored, beware that this behavior could be inconsistent across browsers.

      $('#counter-date').countdownCube( {
        target: new Date( '10/1/2026 11:00' ),  // local time
        targetTimezone: 'America/Los_Angeles', // ignored
        cubeSize: 150,
        background:  'mistyrose',
        color: 'sienna',
      } );

Should be Los Angeles, but it's local time

LO
1
1
1
1
1
years
AD
5
5
5
5
5
months
IN
29
29
29
29
29
days
G.
9
9
9
9
9
hours
..
13
13
13
13
13
minutes
...
10
10
10
10
10
seconds

If you use the legacy Date object, be explicit with timezone in the target string.

Adding a Z at the end means UTC (ISO 8601), otherwise you can specify the offset from UTC using the format ±hh:mm.

      $('#counter-date-utc').countdownCube( {
        target: new Date( '2026-10-01T11:00Z' ),  // UTC
        targetTimezone: 'America/Los_Angeles',  // ignored
        cubeSize: 150,
        background:  'mistyrose',
        color: 'saddlebrown',
      } );

UTC (2026-10-01T11:00Z)

LO
1
1
1
1
1
years
AD
5
5
5
5
5
months
IN
29
29
29
29
29
days
G.
9
9
9
9
9
hours
..
13
13
13
13
13
minutes
...
10
10
10
10
10
seconds

UTC (2026-10-01T11:00-08:00)

      $('#counter-date-los-angeles').countdownCube( {
        target: new Date( '2026-10-01T11:00-08:00' ),  // offset from UTC
        cubeSize: 150,
        background:  'mistyrose',
        color: 'brown',
      } );
LO
1
1
1
1
1
years
AD
5
5
5
5
5
months
IN
29
29
29
29
29
days
G.
17
17
17
17
17
hours
..
13
13
13
13
13
minutes
...
10
10
10
10
10
seconds

Example 5

      $('#counter-end').countdownCube( {
        target: '2025-04-02T01:46:59.000Z',  // now + 10 seconds
        targetTimezone: 'UTC',
        cubeSize: 150,
        background:  'whitesmoke',
        color: 'grey',
        onEnd: function(e) {
          $("#counter-end").text('This is the end!');
        }
      } );
LO
0
0
0
0
0
years
AD
0
0
0
0
0
months
IN
0
0
0
0
0
days
G.
0
0
0
0
0
hours
..
0
0
0
0
0
minutes
...
9
9
9
9
9
seconds

Example 6

      $('#counter-end-notrigger').countdownCube( {
        target: '2024-04-02T01:00Z',
        targetTimezone: 'UTC',
        cubeSize: 150,
        background:  'lightcyan',
        color: 'darkcyan',
        /*
           target is in the past and triggerEnd is false,
           so onEnd is not triggered when the page is loaded
        */
        onEnd: function(e) {
          $("#counter-end-notrigger")
            .text('This was the end, but it was not triggered! ' +
                  '(counter original target: ' +
                  e.options.targetDateObject.toISOString() +
                  ')');
        }
      } );
LO
0
0
0
0
0
years
AD
0
0
0
0
0
months
IN
0
0
0
0
0
days
G.
0
0
0
0
0
hours
..
0
0
0
0
0
minutes
...
0
0
0
0
0
seconds

      $('#counter-end-trigger').countdownCube( {
        target: '2024-04-02T01:00Z',
        targetTimezone: 'UTC',
        cubeSize: 150,
        background:  'lightcyan',
        color: 'cyan',
        onEnd: function(e) {
          $("#counter-end-trigger")
            .text('This was the end and it was triggered! ' +
                  '(counter original target: ' +
                  e.options.targetDateObject.toISOString() +
                  ')');
        },
        triggerEnd: true,
      } );
This was the end and it was triggered! (counter original target: 2024-04-02T01:00:00.000Z)

Download the source code here.