如何:一页上有多个年龄时钟/计数器(JavaScript) [英] How to: Multiple Age Clocks/Counters on one page (Javascript)
问题描述
我在html页面(使用javascript)中寻找多重计数或年龄计时器.我想在每个孩子的图片下方显示孩子的年龄时钟/计数器.我不太了解javascript(我能识别一些代码)，并且对html有点了解.我已经在互联网上进行搜索，但似乎没有任何功能可以接近以下功能.有很多计数计数器等，但是大多数都是计数天，而那些计数年龄的计数器只能一次性使用.以下是我朋友发现的一些代码.该代码仅适用于一个人/年龄，包括几周.事实是我要列出所有孩子的一页.
预期结果示例:
约翰出生于泰国的图片
约翰10岁零03个月16天12小时14分钟03秒.
Picture Mary出生于美国佛罗里达州
玛丽的年龄为08个月12天14小时02分钟53秒.
图片克里斯(Chris)生于澳大利亚墨尔本
克里斯(Chris)今年04岁，02个月，03天，01小时，06分钟，12秒.
图片Lindy出生于荷兰
Lindy今年03岁11个月24天23小时44分23秒.
时钟不断滴答作响.
请注意，由于Mary不到一岁，因此不会显示0年的值.
我还希望考虑一下出生地与网页查看器所在时区之间的时差.这可能吗?还是我必须重新计算它们的GMT(格林威治时区)出生时间才能正常工作，或者服务器的时区?我们如何才能做到准确?
小时，分钟和秒会很棒，但是当然是可选的.下面的代码还显示了几周，这取决于您使用还是不使用.也许脚本可以允许您选择要显示的值?
我希望至少有四个孩子，但是以后通过复制一些代码添加更多的可能性很大.
这不是在线表格，因此可以在脚本中设置所有出生时间/日期的详细信息.
这是我们找到的脚本:
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 öneWeek = 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>
在某处有解决方案吗?
任何人都可以(重新)编写脚本以适合上述功能吗?
有任何提示或推荐吗?
谢谢
Pepin
Is there a solution somewhere?
Can anyone (re)write the script to fit above described functionality?
Any tips or referals?
Thanks
Pepin
推荐答案
只是一个基本概念:您不需要多个计时器，只需要拍摄当前时间的当前快照，然后减去时间此时的所有商品的记录.
参见 http://stackoverflow.com/questions/221294/how-do -you-get-a-timestamp-in-javascript [ ^ ].
—SA
Just a basic idea: you don''t need multiple timer, you need just to take a current snapshot of a current time, and then subtract the time records of all your items from this point.
See http://stackoverflow.com/questions/221294/how-do-you-get-a-timestamp-in-javascript[^].
—SA
这篇关于如何:一页上有多个年龄时钟/计数器(JavaScript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
