JavaScript程序基础（十七）JavaScript常用对象-Date

看山还是山，看水还是水

已于 2022-04-10 21:52:13 修改

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： javascript 前端 html

于 2022-04-10 21:49:21 首次发布

本文链接：https://blog.csdn.net/xcjyxy2021/article/details/124086767

版权

javascript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

一、初识Date对象
Date对象示例：在网页上显示当前时间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
        <div id="time"></div>
		<script type="text/javascript">
			function showtime(){
			var now=new Date();
			var s="";
			s+=now.getFullYear()+"年";		
			s+=now.getMonth()+1+"月";		
			s+=now.getDate()+"日";
			s+=now.getHours()+":";		
			s+=now.getMinutes()+":";		
			s+=now.getSeconds();
			return s;
		}

		setInterval(function(){
			document.getElementById("time").innerHTML=showtime();
		},1000);
		</script>
	</body>
</html>

网页上可以动态实时显示当前时间。

二、Date对象

Date对象提供了大量的函数，用于控制日期和时间，所有开发者都可以使用。
Date对象，必须使用new创建，然后再使用。
创建Date对象 - 语法格式1

var  dateObj = new Date();

创建Date对象时没有设置参数，Date对象返回当前日期和时间。
简单示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date();
document.write(now);
		</script>
	</body>
</html>

创建Date对象 - 语法格式2

var  dateObj = new Date(dateVal);

参数dateVal，如果是数值，表示指定日期与1970年1月1日午夜间的毫秒数。
简单示例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date(4243213);
            document.write(now);
		</script>
	</body>
</html>

简单示例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date("October 13, 2019 11:13:00");
            document.write(now);
		</script>
	</body>
</html>

简单示例3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date("2019-5-25 13:23:12");
            document.write(now);
		</script>
	</body>
</html>

简单示例4：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date("2019/5/25");
            document.write(now);
		</script>
	</body>
</html>

创建Date对象 - 语法格式3

var  dateObj = new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]);

参数dateVal，如果是数值，表示指定日期与1970年1月1日午夜间的毫秒数。
简单示例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date(2019, 5, 25);
            document.write(now);
		</script>
	</body>
</html>

简单示例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date(2019, 5, 25, 13);
            document.write(now);
		</script>
	</body>
</html>

简单示例3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date(2019, 5, 25, 13, 23, 12);
            document.write(now);
		</script>
	</body>
</html>

Date对象方法：获取日期和时间的方法

示例：应用Date对象中的方法输出当前的日期和时间。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date();
            var year=now.getFullYear();
            var month=now.getMonth()+1;
            var date=now.getDate();
            document.write("今天是："+year+"年"+month+"月"+date+"日");
            document.write("<br />");

            var hour=now.getHours();
            var minute=now.getMinutes();
            var second=now.getSeconds();
            document.write("当前时间："+hour+":"+minute+":"+second);
		</script>
	</body>
</html>

Date对象的方法：设置日期和时间的方法

示例：应用Date对象中的方法获取当前日期距离明年元旦的天数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date();
            var newYear=new Date();
            var nextYear=now.getFullYear()+1;
            newYear.setFullYear(nextYear);
            newYear.setMonth(0);
            newYear.setDate(1);
            var days=newYear.getTime()-now.getTime();
            days=Math.ceil(days/(24*60*60*1000));   // 大于等于x的最小整数
            document.write("今天距离明年元旦还有："+days+"天");
		</script>
	</body>
</html>

Date对象的方法：转换为字符串的方法

示例：将当前日期时间，转换成各种格式的字符串。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var now=new Date();
            document.write(now.toString()+"<br />");
            document.write(now.toLocaleString()+"<br />");
            document.write(now.toLocaleDateString()+"<br />");
            document.write(now.toLocaleTimeString()+"<br />");
		</script>
	</body>
</html>

三、练习
应用Date对象中的方法，计算距离你毕业的天数。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<script type="text/javascript">
		var now=new Date();
        var newYear=new Date();
        var nextYear=now.getFullYear()+2;
        newYear.setFullYear(nextYear);
        newYear.setMonth(5);
        newYear.setDate(30);
        var days=newYear.getTime()-now.getTime();
        days=Math.ceil(days/(24*60*60*1000));   // 大于等于x的最小整数
        document.write("今天距离毕业还有："+days+"天");
	</script>
</body>
</html>