js和html:周岁年龄计算器

最新推荐文章于 2024-04-15 10:59:31 发布

zkCodes

最新推荐文章于 2024-04-15 10:59:31 发布

阅读量4.2k

点赞数 11

分类专栏：前端demo

本文链接：https://blog.csdn.net/zk_813/article/details/91398935

版权

前端demo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

输入界面展示:

输出结果展示:

实现代码:

<!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>

zkCodes

关注

11
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
js和html:周岁年龄计算器

输入界面展示:输出结果展示: 实现代码: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <!-- 设计输...
复制链接

扫一扫