基于HTML+JS实现简单的年龄计算器
作者:海拥? 时间:2024-04-23 09:27:29
前言
在线演示地址: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
来源:https://haiyong.blog.csdn.net/article/details/116721314
标签:HTML,JS,年龄,计算器
0
投稿
猜你喜欢
GO中的条件变量sync.Cond详解
2024-02-10 15:08:35
python时间序列按频率生成日期的方法
2021-10-04 22:38:40
关于ASP中的类class
2007-08-19 15:37:00
一道python走迷宫算法题
2022-08-11 19:14:25
Python3爬虫中识别图形验证码的实例讲解
2022-10-17 17:11:20
python绘制动态曲线教程
2023-01-20 08:24:33
Python实时监控网站浏览记录实现过程详解
2021-06-24 23:55:02
JS中window.open全屏命令解析及使用示例
2024-04-10 16:12:54
浅谈python写入大量文件的问题
2021-12-07 00:44:00
MySQL 数值类型概述int smallint tinyint
2010-11-02 11:46:00
详细分析Python collections工具库
2022-06-28 01:18:57
python相似模块用例
2023-02-05 12:04:09
Python可视化神器pyecharts之绘制地理图表练习
2022-08-12 10:20:00
python数据XPath使用案例详解
2023-07-28 15:24:24
用Python解析XML的几种常见方法的介绍
2023-12-18 11:35:08
对python3.4 字符串转16进制的实例详解
2022-03-29 16:15:17
从0编写区块链之用python解释区块链最基本原理
2022-07-20 10:08:24
python process模块的使用简介
2023-08-05 13:13:13
javascript面向对象编程(三)
2008-03-07 13:19:00
重构Python代码的六个实例
2023-08-07 02:10:14