基于 HTML、CSS 和 JS 的年龄计算器

<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>    <footer class="page-footer">        <span>made by </span>        <a href="http://haiyong.site/moyu" target="_blank">          <img class="touxiang"  src="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" alt="George Martsoukos logo">        </a>      </footer>

*,*: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;}.page-footer {		  position: fixed;		  right: 0;		  bottom: 20px;		  display: flex;		  align-items: center;		  padding: 5px;		  color: black;		  background: rgba(255, 255, 255, 0.65);		}				.page-footer a {		  display: flex;		  margin-left: 4px;		}		.touxiang{			width:24px;			height:24px;		}

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;    }}