JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

基于HTML+JS实现简单的年龄计算器

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了基于HTML+JS实现简单的年龄计算器，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

在线演示地址：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 &amp;& 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 

以上就是基于HTML+JS实现简单的年龄计算器的详细内容，更多关于HTML JS 年龄计算器的资料请关注脚本宝典其它相关文章！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的基于HTML+JS实现简单的年龄计算器全部内容，希望文章能够帮你解决基于HTML+JS实现简单的年龄计算器所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程