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

用HTML5+js 计算年龄相关推荐

JS 计算年龄为几岁几月几天
粗糙的演示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
计算年龄案例(JS)
计算年龄案例(JS) <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
js生日计算年龄_用T-SQL计算明细年龄问题.
提前说一下,有一个bug,就是出生日期等于getdate()的时候,由于没有精确到时分秒,而无法计算年龄. 过几天补上. /*计算明细年龄问题*/DECLARE @ADATE DATETIME, @B ...
js生日计算年龄_生男生女计算公式超准
生男生女的计算公式是怎样的?如何通过计算公式准确的推算出你怀的是男孩还是女孩呢?据说生男生女的公式超准确度99%,这么简单又准确的计算方法你确定不用吗? 一.生男生女计算公式: 1:怀孕农历月份双乘+ ...
js生日计算年龄_你知道用EXCEL可以从身份证中提取生日、性别、年龄、生肖吗？...
首先我们先了解下中国身份证号码的编排规则,中国公民身份证共18位,1~6位为省份地区信息码:7~14位为出生日期码:15~16位数字表示所在地的派出所的代码:第17位数字表示性别(奇数表示男性,偶数表 ...
JS根据身份证号码计算年龄和性别
/*** 根据身份证号得到姓别和精确计算年龄*/ function analyzeIDCard(IDCard){var sexAndAge = {};//获取用户身份证号码var userCard = ...
java通过身份证号计算周岁年龄(附js计算)
最近项目上有一个需要根据身份证获取老人周岁的功能,本以为当前年直接减去身份证的出生年就好了.结果测试提了过了生日就是+1岁,没过生日才是正确的.于是呼,哗哗的改代码.下面分别贴出java计算和js计算 ...
Html5+js测试题(开发版)
------------------------------------------------ 1. 谈谈你对js闭包的理解: 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的 ...
Html5+js测试题【完整版】
一.闭包的理解: 使用闭包主要是为了设计私有的方法和变量.闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露. 闭包三个特性: 1.函数嵌套函数 ; ...

用HTML5+js 计算年龄

用HTML5+js 计算年龄相关推荐

最新文章

热门文章