Javascript 如何在年龄计算器中确定从生日到某个年龄还剩多少年(D/M/Y)?

Javascript 如何在年龄计算器中确定从生日到某个年龄还剩多少年(D/M/Y)?,javascript,html-table,calculator,Javascript,Html Table,Calculator,为了确定从生日到某个年龄还剩多少年(D/M/Y),我需要做哪些更改?i、 我的生日是1990年1月1日,今天我的年龄是27岁5个月。。。。2040年我将50岁 我想知道从今天到50岁还有多少年? 另一件事是关注标题应该在结果的正上方,而不是结果的左侧。 下面是这个脚本的代码和两张关于这个的图片 函数wr_document() { var w=新日期(); var s_d=w.getDate(); var s_m=w.getMonth()+1; var s_y=w.getFullYear()

为了确定从生日到某个年龄还剩多少年(D/M/Y),我需要做哪些更改?i、 我的生日是1990年1月1日,今天我的年龄是27岁5个月。。。。2040年我将50岁

我想知道从今天到50岁还有多少年? 另一件事是关注标题应该在结果的正上方,而不是结果的左侧。 下面是这个脚本的代码和两张关于这个的图片


函数wr_document()
{
var w=新日期();
var s_d=w.getDate();
var s_m=w.getMonth()+1;
var s_y=w.getFullYear();
document.cir.len11.value=s\u d;
document.cir.len12.value=s\m;
document.cir.len13.value=s_y;
}
函数isNum(arg)
{
var args=arg;
if(args==“”| | args==null | | args.length==0)
{
返回false;
}
args=args.toString();
对于(变量i=0;i“9”)和&args.子字符串(i,i+1)!=”)
{
返回false;
}
}
返回true;
}
功能检查日(aa)
{
var val=aa.value;
var-valc=val.substring(0,1);
如果(val.length>0&&val.length 31)
{
aa.价值=价值;
}
}
否则如果(值长度>2)
{
val=val.substring(0,2);
aa.值=val;
}
}
函数checkmon(aa)
{
var val=aa.value;
var-valc=val.substring(0,1);
如果(val.length>0&&val.length 12)
{
aa.价值=价值;
}
}
否则如果(值长度>2)
{
val=val.substring(0,2);
aa.值=val;
}
}
功能检查年度(aa)
{
var val=aa.value;
var-valc=val.substring(0,(val.length-1));
如果(val.length>0&&val.length275759)
{
aa.价值=”;
}
}
否则如果(值长度>4)
{
aa.价值=价值;
}
}
功能检查年份(datea)
{
如果(datea.getYear()%4==0)
{
如果(datea.getYear()%10!=0)
{
返回true;
}
其他的
{
如果(datea.getYear()%400==0)
返回true;
其他的
返回false;
}
}
返回false;
}
功能日每月(Y,M){
与(新日期(Y、M、1、12)){
设定日期(0);
返回getDate();
}
}
函数datediff(date1,date2){
变量y1=date1.getFullYear(),m1=date1.getMonth(),d1=date1.getDate(),
y2=date2.getFullYear(),m2=date2.getMonth(),d2=date2.getDate();
如果(d1对于(var j=7;j有很多方法可以实现你的要求。
对于格式,您可以为表定义CSS规则,如下所示:
宽度:100%;
文本对齐:居中

在50岁生日之前,您可以将出生日期加上50年(以毫秒为单位),并进行相应计算,但您可能需要在计算中注意以下几点:

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>


function wr_document()
{
var w=new Date();
var s_d=w.getDate();
var s_m=w.getMonth()+1;
var s_y=w.getFullYear();


document.cir.len11.value=s_d;
document.cir.len12.value=s_m;
document.cir.len13.value=s_y;
}

function isNum(arg)
{
var args = arg;
if (args == "" || args == null || args.length == 0)
{
return false;
}
args = args.toString();
for (var i = 0; i<args.length; i++)
{
if ((args.substring(i,i+1) < "0" || args.substring(i, i+1) > "9") && args.substring(i, i+1) != ".")
{
return false;
}
}
return true;
}
function checkday(aa)
{
var val = aa.value;
var valc = val.substring(0,1);
if(val.length>0 && val.length<3)
{
if(!isNum(val) || val == 0)
{
aa.value="";
}
else if( val < 1 || val > 31)
{
aa.value=valc;
}
}
else if(val.length>2)
{
val = val.substring(0, 2);
aa.value=val;
}
}
function checkmon(aa)
{
var val = aa.value;
var valc = val.substring(0,1);
if(val.length>0 && val.length<3)
{
if(!isNum(val) || val == 0)
{
aa.value="";
}
else if(val < 1 || val > 12)
{
aa.value=valc;
}
}
else if(val.length>2)
{
val = val.substring(0, 2);
aa.value=val;
}
}
function checkyear(aa)
{
var val = aa.value;
var valc = val.substring(0,(val.length-1));
if(val.length>0 && val.length<7)
{
if(!isNum(val) || val == 0)
{
aa.value=valc;
}
else if(val < 1 || val>275759)
{
aa.value="";
}
}
else if(val.length>4)
{
aa.value=valc;
}
}
function checkleapyear(datea)
{
if(datea.getYear()%4 == 0)
{
if(datea.getYear()% 10 != 0)
{
return true;
}
else
{
if(datea.getYear()% 400 == 0)
return true;
else
return false;
}
}
return false;
}
function DaysInMonth(Y, M) {
with (new Date(Y, M, 1, 12)) {
setDate(0);
return getDate();
}
}
function datediff(date1, date2) {
var y1 = date1.getFullYear(), m1 = date1.getMonth(), d1 = date1.getDate(),
y2 = date2.getFullYear(), m2 = date2.getMonth(), d2 = date2.getDate();
if (d1 < d2) {
m1--;
d1 += DaysInMonth(y2, m2);
}
if (m1 < m2) {
y1--;
m1 += 12;
}
return [y1 - y2, m1 - m2, d1 - d2];
}
function calage()
{
var curday = document.cir.len11.value;
var curmon = document.cir.len12.value;
var curyear = document.cir.len13.value;
var calday = document.cir.len21.value;
var calmon = document.cir.len22.value;
var calyear = document.cir.len23.value;
if(curday == "" || curmon=="" || curyear=="" || calday=="" || calmon=="" || calyear=="")
{
alert("Please fill all the values and click 'Go'");
}
else if(curday == calday && curmon==calmon && curyear==calyear)
{
alert("Today your birthday & Your age is 0 years old")
}
else
{
var curd = new Date(curyear,curmon-1,curday);
var cald = new Date(calyear,calmon-1,calday);
var diff = Date.UTC(curyear,curmon,curday,0,0,0)
- Date.UTC(calyear,calmon,calday,0,0,0);
var dife = datediff(curd,cald);
document.cir.val.value=dife[0]+" years, "+dife[1]+" months, and "+dife[2]+" days";
var secleft = diff/1000/60;
document.cir.val3.value=secleft+" minutes since your birth";
var hrsleft = secleft/60;
document.cir.val2.value=hrsleft+" hours since your birth";
var daysleft = hrsleft/24;
document.cir.val1.value=daysleft+" days since your birth";
//alert(""+parseInt(calyear)+"--"+dife[0]+"--"+1);
var as = parseInt(calyear)+dife[0]+1;
var diff = Date.UTC(as,calmon,calday,0,0,0)
- Date.UTC(curyear,curmon,curday,0,0,0);
var datee = diff/1000/60/60/24;
document.cir.val4.value=datee+" days left for your next birthday";
}
}
function color(test)
{
for(var j=7; j<12; j++)
{
var myI=document.getElementsByTagName("input").item(j);
//myI.setAttribute("style",ch);
myI.style.backgroundColor=test;
}
}
function color1(test)
{
var myI=document.getElementsByTagName("table").item(0);
//myI.setAttribute("style",ch);
myI.style.backgroundColor=test;
}

</script>

<style media="screen" type="text/css">
.cal-container {
 width: 540px;
margin: 10px auto 0; 
}
#age-calculator {
    background: none repeat scroll 0 0 #DDDDDD;
    border: 1px solid #BEBEBE;
    padding-left: 20px;
}

.calc {
    border-color: #AAAAAA #999999 #929292 #AAAAAA;
    border-style: solid;
    border-width: 1px 2px 2px 1px;
    padding: 2px 30px 3px;
    height: 27px;
}
.calc:active {
    border-color: #AAAAAA #999999 #929292 #AAAAAA;
    border-style: solid;
    border-width: 1px;
}

</style>


<title>Age calculator</title>
</head>
<body onLoad="wr_document()">
<div class="cal-container">
<div id="calculator-container">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top">
<h1 style="padding-top: 10px;">Age Calculator</h1>
<div class="descalign">
<span>Calculate your age in days, years, minutes, seconds. Know how many days are left for your next birthday.</span><br/><br/>
</div>
<div id="age-calculator">
<table width="100%" cellspacing="4" cellpadding="0" border="0" bgcolor="">
<tbody>
<tr>
<td colspan="2">
<table class="result" width="100%" height="100%">
<tbody>
<tr>
<td>
<form name="cir">
<table cellspacing="0" cellpadding="3">
<tbody>
<tr>
<td colspan="2">
<br>
Today's  Date is:
</td>
</tr>
<tr>
<td align="center" colspan="2">
Date -
<input class="innerc resform" type="text" value="" onkeyup="checkday(this)" size="2" name="len11">
Month -
<input class="innerc resform" type="text" value="" onkeyup="checkmon(this)" size="2" name="len12">
Year -
<input class="innerc resform" type="text" value="" onkeyup="checkyear(this)" size="4" name="len13">
<br>
<br>
</td>
</tr>
<tr>
<td colspan="2"> Enter Your Date of Birth : </td>
</tr>
<tr>
<td align="center" colspan="2">
Date -
<input class="innerc resform" type="text" onkeyup="checkday(this)" size="2" name="len21">
Month -
<input class="innerc resform" type="text" onkeyup="checkmon(this)" size="2" name="len22">
Year -
<input class="innerc resform" type="text" onkeyup="checkyear(this)" size="4" name="len23">
<br>
<br>
<input class="calc" type="button" onclick="calage()" value=" Go " name="but">
<br>
<br>
</td>
</tr>
<tr>
<td class="form" width="30%" align="center">
<b> </b>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>
<b> Your Age is </b>
</td>
<td>
<input class="resform" type="text" readonly="" size="36" name="val">
</td>
</tr>
<tr>
<td>
<b> Your Age in Days </b>
</td>
<td>
<input class="resform" type="text" readonly="" size="36" name="val1">
</td>
</tr>
<tr>
<td>
<b> Your Age in Hours </b>
</td>
<td>
<input class="resform" type="text" readonly="" size="36" name="val2">
(Approximate)
</td>
</tr>
<tr>
<td class="form">
<b> Your Age in Minutes </b>
</td>
<td>
<input class="resform" type="text" readonly="" size="36" name="val3">
(Approximate)
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<b> Your Next Birthday</b>
</td>
<td>
<input class="innerc resform" type="text" readonly="" size="36" name="val4">
</td>
</tr>
</tbody>
</table>
</form>
</td>
</tr>
</tbody>
</table>
<br>
</td>
<td> </td>
</tr>
<tr>
<td align="right" colspan="2"> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>