js+html实现周岁年龄计算器
更新时间：2019年06月25日 17:16:19 作者：zk_813
这篇文章主要为大家详细介绍了js+html实现周岁年龄计算器的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js+html实现周岁年龄计算器的具体代码，供大家参考，具体内容如下
输入界面展示:
输出结果展示:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<!-- 设计输入及点击界面 -->
<p>请输入您的出生日期(yyy/mm/dd):</p>
<input type="text" style="width: 60px;" id="year">/
<input type="text" style="width: 60px;" id="month">/
<input type="text" style="width: 60px;" id="day"></br>
<!-- 运用button标签并设置点击事件函数 -->
<button style="margin-top:10px " onclick="getAge()">计算</button>
</div>
<script>
//计算周岁年龄的函数
function getAge() {
//定义返回值
var returnAge
//获取输入框参数
var birthYear = document.getElementById("year").value
var birthMonth = document.getElementById("month").value
var birthDay = document.getElementById("day").value
//获取当前时间
d = new Date();
var nowYear = d.getFullYear()
var nowMonth = d.getMonth() + 1
var nowDay = d.getDate()
//计算周岁年龄差
if (nowYear == birthYear) {
returnAge = 0; //同年 则为0岁
} else {
var ageDiff = nowYear - birthYear //年之差
if (ageDiff > 0) {
if (nowMonth == birthMonth) {
var dayDiff = nowDay - birthDay //日之差
if (dayDiff < 0) {
returnAge = ageDiff - 1
} else {
returnAge = ageDiff
}
} else {
var monthDiff = nowMonth - birthMonth //月之差
if (monthDiff < 0) {
returnAge = ageDiff - 1
} else {
returnAge = ageDiff
}
}
} else {
returnAge = -1 //输入有误
}
}
alert(returnAge)//结果弹窗显示
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
fullPage.js 是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，本文主要介绍了fullpage.js全屏滚动的具体使用方法，感兴趣的可以了解一下2021-09-09
JavaScript中document.querySelector函数用法介绍
这篇文章主要给大家介绍了关于JavaScript中document.querySelector函数用法的相关资料,document.querySelector是JavaScript中的一个内置方法,用于通过CSS选择器选择文档中的第一个匹配元素,需要的朋友可以参考下2023-08-08
下面小编就为大家带来一篇JavaScript数组去重的两种方法推荐。小编觉得听错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看2016-04-04
这篇文章主要介绍了JavaScript如何判断input数据类型,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
IE6已经让人恶心很久了, Google旗下Youtube决定在3月13日起停止对IE6的支持. 但愿能加速IE6更换的速度.2010-11-11
用javascript脚本语言编写一个“个人所得税计算器”？计算公式：所得税=（月收入-起征额）*10%；重填就是全部清空；十分的实用，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要介绍了JavaScript中如何对多维数组(矩阵)去重的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了js实现图片旋转的三种方法,需要的朋友可以参考下2014-04-04
ant design下运用js实现框选功能，这篇文章主要介绍了ant design实现圈选功能,本文通过实例代码截图的形式给大家介绍的非常详细，需要的朋友可以参考下2019-12-12
BootStrap+Mybatis框架下实现表单提交数据重复验证
这篇文章主要介绍了BootStrap+Mybatis框架下实现表单提交数据重复验证功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
最新评论