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