PDA

View Full Version : How to get Multiple Age counters / clocks (Javascript)



Pepin
11-21-2011, 05:16 AM
Hi,

I am looking for a multiple countup or age timer within a html page (using javascript). I want to display below each child picture the age clock/counter of the child. I do not know javascript well (I recognize some code) and know a little of html. I have searched on internet and nothing seems to get close to the below functionality. There are plenty of countup counters etc, but mostly count days, and those that do count age are single use only. Below is some code my friend found. That code works for one person/age only and includes weeks. The thing is that I want one page with all the children listed.

Example of Expected Outcome:

Picture John born in Thailand
John is 10 years, 03 months, 16 days, 12 hours, 14 minutes, 03 seconds old.

Picture Mary born in Florida, USA
Mary is 08 months, 12 days, 14 hours, 02 minutes, 53 seconds old.

Picture Chris born in Melbourne, Australia
Chris is 04 years, 02 months, 03 days, 01 hours, 06 minutes, 12 seconds old.

Picture Lindy born in The Netherlands
Lindy is 03 years, 11 months, 24 days, 23 hours, 44 minutes, 23 seconds old.

And the clocks keep ticking and counting up.

Please note that since Mary is less than a year old, the 0 year value does not show.

I also would like the possibility to consider the time differences between the places they were born and the time zone the web page viewer is in. Is that possible? Or maybe I have to recalculate their GMT (Greenwhich time zone) birth time for that to work, or maybe the time zone of the server? How can we make that accurate?

The hours, minutes, and seconds, would be great, but is of course optional. The code below also shows weeks, which is up to you to use or not. Maybe the script can allow you to choose which values to show?

I would like this for at least four children, but the possibility to add more later by copying some code would be great.

This is not an online form, so all time/date of birth details can be set in the script.

Here is the script we found:

<!-- Copy and Paste into HEAD of HTML-->

<script type="text/javascript" language="JavaScript">

function ElapsedTime(inFromDate,inToDate) {
var inFromDate = (arguments.length == 0) ? new Date() : arguments[0];
var inToDate = (arguments.length == 1) ? new Date() : arguments[1];

// if (arguments.length == 0) var inFromDate = new Date(); // IE4 has a bug in constructors,
// if (arguments.length == 1) var inToDate = new Date(); // so use above method.

var fromDate = new Date(inFromDate);
var toDate = new Date(inToDate);

var tempDate = new Date();
if (fromDate.getTime() > toDate.getTime()) {
tempDate = new Date(fromDate);
fromDate = new Date(toDate);
toDate = new Date(tempDate);
}
var totMonths = 12*toDate.getFullYear() + toDate.getMonth() +
-12*fromDate.getFullYear() - fromDate.getMonth()
var years = Math.floor(totMonths / 12)
var months = totMonths - 12*years
if (dateAsNumber(toDate,"D") < dateAsNumber(fromDate,"D")) months -= 1
if (months < 0) {
months = 0
if (years > 0) years -= 1
}

var yearsOff = years + fromDate.getFullYear()
var monthsOff = months + fromDate.getMonth()
if (monthsOff >= 12) {
monthsOff -= 12
yearsOff += 1
}
var tempDate = new Date(fromDate);
tempDate.setFullYear(yearsOff);
tempDate.setMonth(monthsOff); // might push us into early next month, so...
while (tempDate.getDate() < fromDate.getDate() && tempDate.getDate() < 9 )
tempDate.setTime(tempDate.getTime() - 1000*60*60*24); // Feb 29 etc.

var milliSecs = toDate.getTime() - tempDate.getTime();
var oneSecond = 1000;
var oneMinute = 60 * 1000;
var oneHour = 60 * oneMinute;
var oneDay = 24 * oneHour;
var oneWeek = 7 * oneDay;
var weeks = Math.floor(milliSecs / oneWeek);
milliSecs -= weeks * oneWeek;
var days = Math.floor(milliSecs / oneDay);
milliSecs -= days * oneDay;
var hours = Math.floor(milliSecs / oneHour);
milliSecs -= hours * oneHour;
var minutes = Math.floor(milliSecs / oneMinute);
milliSecs -= minutes * oneMinute;
var seconds = Math.floor(milliSecs / oneSecond);

var timeValue = "";
if (years) timeValue += years + ((years==1) ? " year, " : " years, ");
if (months) timeValue += months + ((months==1) ? " month, " : " months, ");
if (weeks) timeValue += weeks + ((weeks==1) ? " week, " : " weeks, ");
if (days) timeValue += days + ((days==1) ? " day, " : " days, ");
var timeValueDays = timeValue.substring(0 , timeValue.length - 2);
timeValue += hours + ((hours==1) ? "hour, " :" hours, ");
timeValue += minutes + ((minutes==1) ? " minute, and " : " minutes, and ");
timeValue += seconds + ((seconds==1) ? " second" : " seconds");

this.years = years;
this.months = months;
this.weeks = weeks;
this.days = days;
this.hours = hours;
this.minutes = minutes;
this.seconds = seconds;
this.text = timeValue;
this.textDays = timeValueDays;
}

function dateAsNumber(inDate,inWhat) {
var what = "", yearBit = 0, monthBit = 0
if (typeof(inWhat) == "undefined" || inWhat.toString() == "" || inWhat.toString() == null) inWhat = ""
what = inWhat.toString().toUpperCase()
if (what != "M" && what != "D") // we want yyyy bit
yearBit = inDate.getFullYear() * Math.pow(10,13);
if (what != "D") // we want month bit
monthBit = inDate.getMonth() * Math.pow(10,11);
return yearBit +
monthBit +
inDate.getDate() * Math.pow(10,09) +
inDate.getHours() * Math.pow(10,07) +
inDate.getMinutes() * Math.pow(10,05) +
inDate.getSeconds() * Math.pow(10,03) +
inDate.getMilliseconds()
}

// ***** SET the DATE and TIME HERE *****
// ( Remembering that in Java Dates,
// months go from 0 (Jan) to 11 (Dec) )

function ageClock() {
var leaveDate = new Date(2009,02,04,14,20) // for 2009 March 04, 7:31am
var now = new Date();
var elapsed = new ElapsedTime(leaveDate,now);
return elapsed.text;
}

function getElement(id) {
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] :
null;
}

function centerShowIt(id) {
var winMid, aD = getElement('ageDisplay');
if (!aD) return;
if (window.innerWidth) winMid = innerWidth/2;
else if (document.body) winMid = document.body.clientWidth/2;
if (!document.layers) {
aD.style.left = winMid - aD.offsetWidth/2;
aD.style.visibility = 'visible';
} else {
aD.pageX = winMid - aD.clip.width/2;
aD.visibility = 'show';
}
}

function update() {
var text = ageClock();
var aD = getElement('ageDisplay');
if (!aD) return;
if (!document.layers) {
aD.innerHTML = text + ' ';
} else {
aD.document.write('<SPAN class="bodytext">' + text + ';</SPAN>');
aD.document.close();
}
setTimeout('update()',1000);
}

/* NS4 resize bug fix from webreference.com */
if (document.layers) {
origWidth = innerWidth;
origHeight = innerHeight;
}
if (document.layers) window.onresize = function() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}
/********************************************/

window.onload = update;

</SCRIPT>

and


<!-- Copy and Paste into BODY of HTML where age is to appear-->

<script type="text/javascript" language="JavaScript">
document.write('<DIV id="ageDisplay" class="bodytext">');
document.write(ageClock());
document.write('</DIV>');
centerShowIt('ageDisplay');
</SCRIPT>

Is there a solution somewhere?
Can anyone (re)write the script to fit above described functionality?
Any tips or referals?

Thanks

Pepin