计算活了多少天

最新推荐文章于 2022-04-25 18:29:32 发布

原创最新推荐文章于 2022-04-25 18:29:32 发布 · 589 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客介绍了一个前端代码示例，用于计算用户输入的出生日期到当前日期的天数。通过HTML和JavaScript实现，当页面加载时自动填充当前日期，用户只需输入出生日期即可计算已生活天数。此外，代码还可用于任意日期间的天数差计算。博客重点展示了前端日期处理和简单的计算逻辑。

今天学习前端，学到日期时间对象，计算自己活了多少天，觉得书上的例子不够友好，把代码改写了一下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>生活了多少天</title>
		<style>
			div{
				font-size:1rem;
				color:#00ade0;
				text-align:center;
				padding-bottom:1rem;
			}
			input{
				border: 1px solid #ccc;
				height: 1rem;
			}
			#btn{
				height: 2rem;
			}
		</style>
	</head>
	<body onload="getDays()">
		<div><h3>输入生日</h3></div>
		<div>
			<p>
			  <input  size="8" id="y1" value="">年
		    <input  size="4" id="m1" value="">月
		    <input  size="4" id="d1" value="">日(出生日期)		
			</p>
		  <p>
		    <input  size="8" id="y2" value="">年
		    <input  size="4" id="m2" value="">月
		    <input  size="4" id="d2" value="">日(今天日期)
		  </p>
			<p>
		<input id="btn" type="button" value="计算已生活了多少天" onclick="calDays()"></p>
	<p>
		您已生活：<span style="color:#F60;" id="result2"></span>天
	</p>
		</div>
		<script type="text/javascript">
			function getDays(){
				var		today=new Date();
			  document.getElementById("y2").value=today.getFullYear();
				document.getElementById("m2").value=today.getMonth()+1;
				document.getElementById("d2").value=today.getDate();
			}
		</script>
		<script>
		function calDays(){
		year1=document.getElementById("y1").value;
		month1=document.getElementById("m1").value;
		date1=document.getElementById("d1").value;
		year2=document.getElementById("y2").value;
		if(year1==""||month1==""||date1=="")
		alert("数值不能为空");
		if (isNaN(year1)||isNaN(month1)||isNaN(date1))
		alert("请重新输入！");
		month2=document.getElementById("m2").value;
		date2=document.getElementById("d2").value;
		day1=new Date(year1,month1-1,date1);//出生日期的毫秒数
		day2=new Date(year2,month2-1,date2); //今天的毫秒数
		document.getElementById("result2").innerHTML=Math.floor((day2-day1)/86400000);
		//1天有24*60*60*1000=86400000毫秒
		}
		</script>
	</body>
</html>

代码定义了两个函数，当文档载入时，onload调用getDays()获取系统当前日期，显示在今天日期输入框中，这样使用者只需输入出生日期就可以计算到今天为止，生活了多少天。
calDays是计算两个日期之间的天数，得到两个日期相差的毫秒数day1和day2，每天是86400000毫秒,然后相除后向下取整。
本例案也可以随意输入两天，计算两个日期之间相差多少天。
案例效果如下：
在这里插入图片描述