基于HTML/CSS/JS的年齡計算器 | 帶有免費原始碼

🌊 作者主頁：海擁
🌊 作者簡介：🏆CSDN全堆疊領域優質創作者、🥇HDZ核心組成員
🌊 粉絲福利：👉 粉絲群 👈每周送6-9本書，不定期送各種小禮品（往期獲獎記錄）

在線演示地址：http://haiyong.site/age-calculator

JavaScript提供了一些內置的日期和時間函式，有助于從日期（出生日期）開始計算年齡，使用這些JavaScript方法，您可以輕松找到任何人的年齡，為此，我們需要用戶輸入日期和當前系統日期，

演示效果

HTML代碼

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

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

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

演示地址

http://haiyong.site/age-calculator

原始碼下載

關注微信公眾號【海擁】后臺回復【年齡計算器】免費獲取!

后面我還會持續更新類似免費好玩的H5小游戲、Java小游戲、好玩、實用的專案和軟體等等

🥇 評論區抽粉絲送書啦

💌 歡迎大家在評論區提出意見和建議! (抽兩位幸運兒送書，實物圖如下)💌

《Vue.js全家桶零基礎入門到進階專案實戰》

【內容簡介】

Vue.js 是一套構建用戶界面的漸進式框架，本書旨在幫助讀者全面掌握 Vue.js 全家桶技術和單頁面前后端分離專案開發，理解 MVVM 框架思想，讓前端和后端開發人員快速精通 Vue.js 全家桶技術，
　　本書貫穿入門準備實操、基礎核心案例、中級進階實戰、綜合進階專案進行講解，循序漸進、環環相扣，通俗易懂，并分析為什么這樣使用，讓你知其所以然，包含的主要技術：NPM/CNPM、VS Code、Vue.js、 MVVM、Axios、Vue Router、webpack、ECMAScript 6、Vue Loader、Vue CLI、Element UI、Vuex、 Mock.js、Easy Mock、ECharts 、Promise、攔截器、組件通信、跨域問題、上線部署等，
　　本書適合有 HTML、CSS、JavaScript 基礎的 Vue.js 零基礎小白、前端開發人員、后端開發人員，同時，也適合以下人員閱讀：在校生，需要掌握流行的新技術，做到與職場同步；在職人員，作業中需要學習使用Vue；有基礎學員，需要系統、全面、高效使用 Vue 技術，

也有不想靠抽，想自己買的同學可以參考下面的鏈接

京東自營購買鏈接：

《Vue.js全家桶零基礎入門到進階專案實戰》- 京東圖書

當當自營購買鏈接：

《Vue.js全家桶零基礎入門到進階專案實戰》- 當當圖書

📣 注意：

大家點贊關注，三天后也就是 12月10日 從評論區留言的同學中抽取兩位送書

🌊 面試題庫：Java、Python、前端核心知識點大全和面試真題資料
🌊 辦公用品：精品PPT模板幾千套，簡歷模板一千多套
🌊 學習資料：2300套PHP建站原始碼，微信小程式入門資料

如果中獎了聯系不上則視為放棄，可以從下方公眾號里找到作者的聯系方式，每周都會送四本書，后面送書力度還會加大，一年送幾百上千本不是問題，回復【進群】領書不迷路，群內 每位成員 我都會送一本，回復【資源】可獲取上面的資料👇🏻👇🏻👇🏻