基于HTML+JS实现简单的年龄计算器
作者:海拥? 发布时间:2024-04-23 09:27:29
标签: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 && 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
0
投稿
猜你喜欢
- 1 停机方案发布公告停止服务离线数据迁移(拆分,重新分配数据)数据校验更改配置恢复服务回滚预案2 停写方案支持读写分离升级公告中断写操作,隔
- 近来有客户要求用table显示一大串数据,由于滚动后就看不到表头,很不方便,所以想到这个效果。上次做table排序对table有了一些了解,
- 1 random.choicepython random模块的choice方法随机选择某个元素foo = ['a',
- 任务说明:编写一个钱币定位系统,其不仅能够检测出输入图像中各个钱币的边缘,同时,还能给出各个钱币的圆心坐标与半径。效果代码实现Canny边缘
- 本文实例讲述了python使用socket向客户端发送数据的方法。分享给大家供大家参考。具体如下:import socket, syspor
- 如下所示:BaseException +-- SystemExit +-- KeyboardInterrupt +-- GeneratorE
- http 模块简介Python3 中的 http 包中含有几个用来开发 HTTP 协议的模块。http.client 是一个底层的 HTTP
- 这篇文章阐述的是一种函数式编程(functional-programming)设计模式,我称之为惰性函数定义(Lazy Function D
- 每当这种情况发生的时候,我总会心里默念道:杯具啊,这辈子也装不完了。因为SQL Server的安装还是比较复杂的,要先安装.Net、Wind
- PyMongo下载PyMongo下载地址:http://pypi.python.org/pypi/pymongo/#downloads当前可
- 本文实例为大家分享了python实现人民币转大写人民币的具体代码,供大家参考,具体内容如下直接上代码:# -*- coding: utf-8
- 选择正确的数据列类型能大大提高数据库的性能和使数据库具有高扩展性。在选择数据列类型时,请从以下几个方面考虑:存放到数据列中的数据类型。数据值
- 决策树也是有监督机器学习方法。 电影《无耻混蛋》里有一
- 使用setStyleSheet方法修改得到自己想要的字体,大小,颜色self.lab = QLabel("标签字体大小颜色&quo
- 最近因为要安装Tensorflow,然后发现tensorflow居然不支持python3.7,于是怒而将其降级到3.6以下是具体命令,mar
- 1、安装pymysql库如果你想要使用python操作MySQL数据库,就必须先要安装pymysql库,这个库的安装很简单,直接使用pip
- 前言对于会PhotoShop的人来说,抠图是非常简单的操作了,有时候几秒钟就能扣好一张图。不过一些比较复杂的图,有时候还是要画点时间的,今天
- 本文实例讲述了Python简单实现TCP包发送十六进制数据的方法。分享给大家供大家参考,具体如下:举例: 0x12, 0x34可以直接拼成
- 将字符串字段转为数字排序或比大小mysql里面有个坑就是,有时按照某个字段的大小排序(或是比大小)发现排序有点错乱。后来才发现,是我们想当然
- 前言pytest.mark.skip可以标记无法在某些平台上运行的测试功能,或者您希望失败的测试功能希望满足某些条件才执行某些测试用例,否则