JavaScript 日期学习+小练习：根据下拉列表计算年龄（PS：大神的代码就是不一样！）

最新推荐文章于 2022-11-10 14:04:45 发布

点点滴滴25

最新推荐文章于 2022-11-10 14:04:45 发布

阅读量392

点赞数

分类专栏： JavaScript学习

本文链接：https://blog.csdn.net/qq_41325698/article/details/102918796

版权

JavaScript学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一. 基本知识学习

1.创建日期对象

通过new Date创建一个日期对象，这个对象就表示当前日期(现在)

<script>
  var d = new Date();
  document.write('new Date():'+d);
</script>

2.年/月/日

分别获取年/月/日
需要注意的是，getMonth()返回的月数，是基零的，0代表1月份

<script>
  var d = new Date();
  document.write('分别获取年月日: ');
  document.write(d.getFullYear());
  document.write("/");
  document.write(d.getMonth()+1);
  document.write("/");
  document.write(d.getDate());
</script>

3.时:分:秒:毫秒

<script>
  var d = new Date();
  document.write("分别获取时:分:秒:毫秒 ");
  document.write(d.getHours());
  document.write(":");
  document.write(d.getMinutes());
  document.write(":");
  document.write(d.getSeconds());
  document.write(":");
  document.write(d.getMilliseconds());
</script>

4.一周的第几天

通过getDay()获取，今天是本周的第几天
与getMonth()一样，返回值是基0的。

<script>
var day=new Date().getDay(); //通过日期对象获取数字形式的星期几
var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");
 
document.write("今天是 ： "+weeks[day]);
  
</script>

5.经历的毫秒数

获取从1970/1/1 08:00:00 至今的毫秒数

<script>
var time = new Date().getTime();
document.write("从1970/1/1 08:00:00 到今天的毫秒数： "+ time);
</script>

6.修改日期和时间

把日期对象设置为2012/12/12 00:00:00

<script>
var d=new Date();
document.write("修改日期对象的值为世界末日:<br>");
d.setFullYear(2012);
d.setMonth(11); //月份是基0的，所以11表示12月
d.setDate(12);
 
d.setHours(0);
d.setMinutes(0);
d.setSeconds(0);
 
document.write(d);
</script>

二.小练习

大概这个效果

我的代码：

下拉列表，中的选项这样处理！

document.write("<option value='"+i+"'>"+i+"</option>");
最后打印出来是：
<option value='i'>i</option>

双引号成对出现，双引号里是单引号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function cal(){
				var date=new Date();
				var CurTime=date.getTime()/1000/60/60/24/365;
				var year=document.getElementById("year").value;
				var month=document.getElementById("month").value;
				var day=document.getElementById("day").value;
				
				var Time=new Date(year,month,day);
				var BirthTime=Time.getTime()/1000/60/60/24/365;
				var age=parseInt(CurTime-BirthTime);
				
				if(age<1)
				       Document.getElementById("age").innerHTML="不到一岁！";
				 else
				     document.getElementById("age").innerHTML="今年"+age+"岁！";
			}
		</script>
	</head>
	<body>
	<div>
			<b>请输入出生年月日:</b>
			<br />
			<b>年:</b>
			<select id="year">
				<script>
					var date=new Date();
					var year=date.getFullYear();
					for(var i=1990;i<year+1;i++)
					document.write("<option>"+i+"</option>");
				</script>
			</select>
			<b>月:</b>
			<select id="month">
				<script>
					for(var i=1;i<13;i++)
					document.write("<option>"+i+"</option>");
				</script>
			</select>
			<b>日:</b>
			<select id="day">
				<script>
					for(var i=1;i<32;i++)
					document.write("<option>"+i+"</option>");
				</script>
			</select>
			<br />
			<button id="computer" onclick="cal()">计算年龄</button>
			<p><b id="age"></b></p>
			
	</div>
	
	
	
	</body>
</html>

大神的代码：

之所以能显示成日历，是因为这句

<input type="date" />

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    请输入出生年月日<br>
    <form>
        出生日期<input type="date" id="date"><br>
            <input type="button" value="计算年龄" onclick="print()"><br>
            <span id="age"></span>
    </form>
 
    <script>
        function print(){
            var date=document.getElementById("date").value;
            var localDate=new Date();
            var year1=localDate.getFullYear();
            var year2=date.split("-")[0];
            var month1=localDate.getMonth();
            var month2=date.split("-")[1];
            var day1=localDate.getDate();
            var day2=date.split("-")[2];
            var result=year1-year2;
            if(month1<month2){
                if(day1<day2){
                    result--;
                }
            }
            document.getElementById("age").innerHTML="您今年"+result+"岁!";
        }
    </script>
</body>
</html>