0
我有2個稱爲出生日期和年齡的HTML字段。在輸入欄中更改顯示年齡
有一個按鈕來計算年齡。現在我想在不按下按鈕的情況下計算這個年齡。它應該會自動顯示年齡，當我在出生日期字段中輸入完成時。如何用JavaScript做到這一點？
<tr>
<td>Birth Date</td>
<td><input type="text" name="birth_date" id="datepicke" value="" maxlength="11"
placeholder="birth date" /></td>
</tr>
<tr>
<td>Age</td>
<td>
<button type="button" onclick="displayDate()">Display Difference</button>
<p id="demo" style="vertical-align: top">
<input type="text" name="age" value="" maxlength="3" placeholder="age" /></td>
</tr>
<script>
function displayDate()
{
var dof = document.getElementById('datepicke').value;
var d1 = new Date(dof); //from date yyyy-MM-dd
var d2 = new Date(); //to date yyyy-MM-dd (taken currentdate)
var Months = d2.getMonth() - d1.getMonth();
var Years = d2.getFullYear() - d1.getFullYear();
var Days = d2.getDate() - d1.getDate();
Months = (d2.getMonth() + 12 * d2.getFullYear()) -
(d1.getMonth() + 12 * d1.getFullYear());
var MonthOverflow = 0;
if (Months - (Years * 12) < 0)
MonthOverFlow = -1;
else
MonthOverFlow = 1;
if (MonthOverFlow < 0)
Years = Years - 1; Months = Months - (Years * 12);
var LastDayOfMonth = new Date(d2.getFullYear(),
d2.getMonth() + 1, 0, 23, 59, 59);
LastDayOfMonth = LastDayOfMonth.getDate();
if (MonthOverFlow < 0 && (d1.getDate() > d2.getDate())) {
Days = LastDayOfMonth + (d2.getDate() - d1.getDate()) - 1;
}
else
Days = d2.getDate() - d1.getDate();
if (Days < 0)
Months = Months - 1;
var l = new Date(d2.getFullYear(), d2.getMonth(), 0);
var l1 = new Date(d1.getFullYear(), d1.getMonth() + 1, 0);
if (Days < 0)
{
if (l1 > l)
Days = l1.getDate() + Days;
else
Days = l.getDate() + Days;
}
document.getElementById("demo").innerHTML = Years +
" Year(s)";
//, " + Months + " Month(s), " + Days + "Day(s
}
</script>
更新：
<tr>
<td>Birth Date</td>
<td><input onblur="displayDate()" type="text" name="birth_date" id="datepicke" value=""
maxlength="11" placeholder="birth date" /></td>
</tr>
<tr>
<td>Age</td>
<td><input type="text" name="age" id="age" value="" maxlength="3" placeholder="age" /></td>
</tr>
JavaScript代碼：
<script>
function displayDate()
{
var dof = document.getElementById('datepicke').value;
var d1 = new Date(dof); //from date yyyy-MM-dd
var d2 = new Date(); //to date yyyy-MM-dd (taken currentdate)
var Months = d2.getMonth() - d1.getMonth();
var Years = d2.getFullYear() - d1.getFullYear();
var Days = d2.getDate() - d1.getDate();
Months = (d2.getMonth() + 12 * d2.getFullYear()) -
(d1.getMonth() + 12 * d1.getFullYear());
var MonthOverflow = 0;
if (Months - (Years * 12) < 0)
MonthOverFlow = -1;
else
MonthOverFlow = 1;
if (MonthOverFlow < 0)
Years = Years - 1; Months = Months - (Years * 12);
var LastDayOfMonth = new Date(d2.getFullYear(),
d2.getMonth() + 1, 0, 23, 59, 59);
LastDayOfMonth = LastDayOfMonth.getDate();
if (MonthOverFlow < 0 && (d1.getDate() > d2.getDate())) {
Days = LastDayOfMonth + (d2.getDate() - d1.getDate()) - 1;
}
else
Days = d2.getDate() - d1.getDate();
if (Days < 0)
Months = Months - 1;
var l = new Date(d2.getFullYear(), d2.getMonth(), 0);
var l1 = new Date(d1.getFullYear(), d1.getMonth() + 1, 0);
if (Days < 0)
{
if (l1 > l)
Days = l1.getDate() + Days;
else
Days = l.getDate() + Days;
}
document.getElementById("age").innerHTML = Years +
" Year(s)";
//, " + Months + " Month(s), " + Days + "Day(s
}
</script>
它沒有出現在'age'年齡字段。 – Shibbir 2014-09-22 06:50:08
@Shibbir你可以創建提琴更好的答案 – Amit 2014-09-22 06:50:48
檢查它http://jsfiddle.net/vjeux/kb3gN/ – Shibbir 2014-09-22 06:54:17