Use CSS for custom display of each instance as you wish.
-----Cut-----function Interval() { /* Composed by David Clayton Ellsworth, 30-31 July 2015 in Kelowna. * * The following examples show 3 ways to state the offset from UTC (Newfoundland, Vancouver and China -- all 3 represent the same moment): * <body onLoad="Interval('Newfoundland', '2015-08-06T14:10Z', '3.5', 'Vancouver', '2015-08-06T10:40Z', '7:00', 'China', '2015-08-07T01:40Z', '-08:00')"> * * <p>2:10PM in Corner Brook <span id="Newfoundland"></span> is the same moment as</p> * <p>10:40AM in Vancouver <span id="Vancouver"></span> and</p> * <p>12:40AM the next day in Nanjing <span id="China"></span>.</p> * * <p>Your text <span id="InLine1"><script>Interval('InLine1', '2015-03-26T01:30Z', '7');</script></span> following text.</p> * * Future events automatically become past events as the event passes. * It should work with any element tags that permit getElementById. * This script will insert text showing days, hours and minutes from a selected time. * * Call in <body> tag or/and in-line. * Each call requires 3 arguments, eg: Interval('InstanceID', 'local-date-timeZ', 'UTC-offset-time') * The time string requires upper case T, and appending with upper case Z (Zulu) to ensure base of UTC. * UTC-offset for the time zone at the time of the event — negative for east, positive for west — in decimal or time format: eg. for Nepal '-5.75' or '-05:45' or '-5:45' * (all arguments within single quotes) * * These comments have been tweeked many times since to clarify and include ways to use the script. * * I agree to release this code into the public domain. * I have developed this code independently and alone. * It is likely so generic that copyright may not apply. * Nevertheless, attribution is appreciated. * Anyone may use this code freely. * * There are working examples at http://ellsworth.ca/events/ * and a live copy of the code at http://ellsworth.ca/code/interval.html */ 'use strict'; var Event, Front, Back, Neg, Nums, Gap, Days, Ds, Hours, Hs, Minutes, Ms, Zero = 0, One = 1, Two = 2, Three = 3, BaseTen = 10, SecM = 60, MilSec = 1000, SecH = 3600, MilRound = 30000, SecD = 86400; for (Event = Zero; Event < arguments.length; Event += Three) { // Iterate each event if (arguments[Event + Two].match(/:/)) { Neg = arguments[Event + Two].match(/-/) ? "-":""; Nums = arguments[Event + Two].match(/\d?\d/g); arguments[Event + Two] = Number(Neg + Nums[Zero]) + (Number(Neg + Nums[One]) / SecM); } Ds = Hs = Ms = "s"; //Assign plural to units Gap = ((Date.parse(arguments[Event + One]) - (new Date().getTime()) + MilRound) / MilSec) + (arguments[Event + Two] * SecH); // Time gap difference epoch units converted to rounded minutes if (Gap < Zero) { //Event is past Front = ""; Back = " ago"; Gap = Math.abs(Gap); //Absolute value for correct calculation of past interval } else { //Event is to come Front = "in "; Back = ""; } Days = parseInt(Gap / SecD, BaseTen); Hours = parseInt((Gap % SecD) / SecH, BaseTen); Minutes = parseInt((Gap % SecH) / SecM, BaseTen); if (Days == One) { Ds = ""; } //Make singular if (Hours == One) { Hs = ""; } // " if (Minutes == One) { Ms = ""; } // " //Print to id location document.getElementById(arguments[Event]).innerHTML = Front + Days + ' day' + Ds + ' ' + Hours + ' hour' + Hs + ' and ' + Minutes + ' minute' + Ms + Back; } }-----Cut-----