用HTML5+js 计算年龄
HTML5代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<div class="container">
<div class="inputs-wrapper">
<input type="date" id="date-input">
<button onclick="ageCalculate()">Calculate</button>
</div>
<div class="outputs-wrapper">
<div>
<span id="years">
-
</span>
<p>
Years
</p>
</div>
<div>
<span id="months">
-
</span>
<p>
Months
</p>
</div>
<div>
<span id="days">
-
</span>
<p>
Days
</p>
</div>
</div>
</div>
<script type="text/javascript">
const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
function ageCalculate() {
let today = new Date();
let inputDate = new Date(document.getElementById("date-input").value);
let birthMonth, birthDate, birthYear;
let birthDetails = {
date: inputDate.getDate(),
month: inputDate.getMonth() + 1,
year: inputDate.getFullYear()
}
let currentYear = today.getFullYear();
let currentMonth = today.getMonth() + 1;
let currentDate = today.getDate();
leapChecker(currentYear);
if (
birthDetails.year > currentYear ||
(birthDetails.month > currentMonth && birthDetails.year == currentYear) ||
(birthDetails.date > currentDate && birthDetails.month == currentMonth && birthDetails.year == currentYear)
) {
alert("Not Born Yet");
displayResult("-", "-", "-");
return;
}
birthYear = currentYear - birthDetails.year;
if (currentMonth >= birthDetails.month) {
birthMonth = currentMonth - birthDetails.month;
} else {
birthYear--;
birthMonth = 12 + currentMonth - birthDetails.month;
}
if (currentDate >= birthDetails.date) {
birthDate = currentDate - birthDetails.date;
} else {
birthMonth--;
let days = months[currentMonth - 2];
birthDate = days + currentDate - birthDetails.date;
if (birthMonth < 0) {
birthMonth = 11;
birthYear--;
}
}
displayResult(birthDate, birthMonth, birthYear);
}
function displayResult(bDate, bMonth, bYear) {
document.getElementById("years").textContent = bYear;
document.getElementById("months").textContent = bMonth;
document.getElementById("days").textContent = bDate;
}
function leapChecker(year) {
if (year % 4 == 0 || (year % 100 == 0 && year % 400 == 0)) {
months[1] = 29;
} else {
months[1] = 28;
}
}
</script>
</body>
</html>
css代码如下:
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #ff6666;
}
.container{
width: 40%;
min-width: 450px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
padding: 50px 30px;
}
.container *{
font-family: "Poppins",sans-serif;
border: none;
outline: none;
}
.inputs-wrapper{
background-color: #080808;
padding: 30px 25px;
border-radius: 8px;
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
margin-bottom: 50px;
}
input,
button{
height: 50px;
background-color: #ffffff;
color: #080808;
font-weight: 500;
border-radius: 5px;
}
input{
width: 60%;
padding: 0 20px;
font-size: 14px;
}
button{
width: 30%;
float: right;
}
.outputs-wrapper{
width: 100%;
display: flex;
justify-content: space-between;
}
.outputs-wrapper div{
height: 100px;
width: 100px;
background-color: #080808;
border-radius: 5px;
color: #ffffff;
display: grid;
place-items: center;
padding: 20px 0;
box-shadow: 0 15px 20px rgba(0,0,0,0.3);
}
span{
font-size: 30px;
font-weight: 500;
}
p{
font-size: 14px;
color: #707070;
font-weight: 400;
}