如何用HTML和JavaScript编写一个简易的年龄计算器程序？

本文共计873个文字，预计阅读时间需要4分钟。

目录+前言+演示效果+HTML代码+CSS代码+JavaScript代码+演示地址+前言+在以下示例中，我们将使用JavaScript、HTML和CSS创建一个简单的年龄计算器。该计算器会根据输入的出生日期来计算年龄。+HTML代码+Age Calculator Age Calculator

+CSS代码+cssbody { font-family: Arial, sans-serif;}

.age-calculator { max-width: 300px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 5px;}

input[type=date] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 5px;}

button { width: 100%; padding: 10px; border: none; border-radius: 5px; background-color: #007BFF; color: white; cursor: pointer;}

button:hover { background-color: #0056b3;}

#result { margin-top: 20px;}+JavaScript代码+javascriptfunction calculateAge() { var birthdate=document.getElementById('birthdate').value; var birthDateObj=new Date(birthdate); var today=new Date(); var age=today.getFullYear() - birthDateObj.getFullYear(); var m=today.getMonth() - birthDateObj.getMonth();

if (m <0 || (m===0 && today.getDate() < birthDateObj.getDate())) { age--; }

document.getElementById('result').textContent=You are + age + years old.;}+演示地址+http://haiyong.site/age-calculator+JavaScript提供了用于处理日期和计算年龄的函数，有助于从出生日期开始计算年龄。

目录

• 前言
• 演示效果
• HTML代码
• CSS代码
• Javascript代码
• 演示地址

前言

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

演示地址

haiyong.site/age-calculator 

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