16 - JavaScript内置对象：Date

最新推荐文章于 2019-11-19 18:18:59 发布

Jay·Yuen

最新推荐文章于 2019-11-19 18:18:59 发布

阅读量2k

点赞数 1

分类专栏： JavaScript 文章标签：内置对象date

本文链接：https://blog.csdn.net/Yuanriver/article/details/102712661

版权

JavaScript 专栏收录该内容

34 篇文章 3 订阅

订阅专栏

内置对象简介

内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。

JavaScript的内置对象：

内置对象	对象说明
Arguments	函数参数集合
Array	数组
Boolean	布尔对象
Date	日期时间
Error	异常对象
Function	函数构造器
Math	数学对象
Number	数值对象
Object	基础对象
RegExp	正则表达式对象
String	字符串对象

前面的几篇文章中，我们专门讲到了数组 Array。今天这篇文章，我们来讲一下其他的内置对象。

内置对象：Date

Date对象的创建

写法一：表示的是当前代码执行的时间（也可以理解成是获取当前时间对象）

    var date1 = new Date();
    console.log(date1);

写法二：在参数中传递一个表示时间的字符串（兼容性最强）

    var date2 = new Date("2019/10/22 22:22:22");
    console.log(date2);

写法三：（不常用）

    var date3 = new Date('Wed Oct 22 2019 22:22:22 GMT+0800 (中国标准时间)');
    console.log(date3 );

写法四：（不常用）

    var date4 = new Date(2019, 10, 22);    //写法四
    console.log(date4);

以上四种写法的打印结果是：

在这里插入图片描述

获取日期和时间

Date对象有如下方法，可以获取日期和时间：

getDate() 获取日 1-31
getDay() 获取星期 0-6（0代表周日，1代表周一）
getMonth() 获取月 0-11（0代表一月）
getFullYear() 获取年份
getHours() 获取小时 0-23
getMinutes() 获取分钟 0-59
getSeconds() 获取秒 0-59
getMilliseconds() 获取毫秒（1s = 1000ms）

代码举例：

	// 我在执行这行代码时，当前时间为 2019年2月4日，周一，13:23:52
	var myDate = new Date();

	console.log(myDate); // 打印结果：Mon Feb 04 2019 13:23:52 GMT+0800 (中国标准时间)
	console.log(myDate.getDate()); // 打印结果：4
	console.log(myDate.getDay()); // 打印结果：1
	console.log(myDate.getMonth()); // 打印结果：1
	console.log(myDate.getFullYear()); // 打印结果：2019
	console.log(myDate.getHours()); // 打印结果：13
	console.log(myDate.getMinutes()); // 打印结果：23
	console.log(myDate.getSeconds()); // 打印结果：52
	console.log(myDate.getMilliseconds()); // 打印结果：393

	console.log(myDate.getTime()); // 获取时间戳。打印结果：1549257832393

getTime()：获取时间戳

Date对象还有如下方法：

getTime() 获取当前日期对象的时间戳。这个方法在实际开发中，用得比较多。

啥叫时间戳？接下来，我们解释一下。

时间戳：指的是从格林威治标准时间的1970年1月1日，0时0分0秒到当前日期所花费的毫秒数（1秒 = 1000毫秒）。

计算机底层在保存时间时，使用的都是时间戳。时间戳的存在，就是为了统一时间的单位。

我们再来看下面这样的代码：

	var myDate = new Date("1970/01/01 0:0:0");

	console.log(myDate.getTime()); // 获取时间戳

打印结果（可能会让你感到惊讶）

	-28800000

为啥打印结果是-28800000，而不是0呢？这是因为，我们的当前代码，是在中文环境下运行的，与英文时间会存在8个小时的时差（中文时间比英文时间早了八个小时）。如果代码是在英文环境下运行，打印结果就是0。

利用时间戳检测代码的执行时间：

我们可以在业务代码的前面定义 时间戳1，在业务代码的后面定义 时间戳2。把这两个时间戳相减，就能得出业务代码的执行时间。

format()

将时间对象转换为指定格式。

参考链接：https://www.cnblogs.com/tugenhua0707/p/3776808.html

练习

举例1：模拟日历

要求每天打开这个页面，都能定时显示当前的日期。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>YuanRiver</title>
		<sty>
			div {
			width: 800px;
			margin: 200px auto;
			color: red;
			text-align: center;
			font: 600 30px/30px "simsun";
			}
		</sty>
	</head>
	
	<body>
		<div></div>
		<script type="text/javascript">
			//模拟日历
			//需求：每天打开这个页面都能定时显示年月日和星期几

			//1.创建一个当前日期的日期对象
			var date = new Date();
			//2.然后获取其中的年、月、日和星期
			var year = date.getFullYear();
			var month = date.getMonth();
			var hao = date.getDate();
			var week = date.getDay();
			//        console.log(year+" "+month+" "+hao+" "+week);
			//3.赋值给div
			var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			var div = document.getElementsByTagName("div")[0];
			div.innerText = "今天是：" + year + "年" + (month + 1) + "月" + hao + "日 " + arr[week];
		</script>
	</body>
</html>

实现效果：

在这里插入图片描述

举例2：发布会倒计时

实现思路：

设置一个定时器，每间隔1毫秒就自动刷新一次div的内容。

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>YuanRiver</title>
		<style>
			div {
			    width: 1210px;
			    margin: 200px auto;
			    color: red;
			    text-align: center;
			    font: 600 30px/30px "simsun";
			}
		</style>
	</head>

	<body>
		<div></div>
		<script type="text/javascript">
			var div = document.getElementsByTagName("div")[0];
			var timer = setInterval(fn, 1);

			function fn() {
				var nowtime = new Date();
				var future = new Date("2019/11/11 00:00:00");
				var timeSum = future.getTime() - nowtime.getTime(); //获取时间差：发布会时间减去此刻的毫秒值
				var day = parseInt(timeSum / 1000 / 60 / 60 / 24);
				var hour = parseInt(timeSum / 1000 / 60 / 60 % 24);
				var minu = parseInt(timeSum / 1000 / 60 % 60);
				var sec = parseInt(timeSum / 1000 % 60);
				var millsec = parseInt(timeSum % 1000);

				//问题处理：所有的时间小于10的时候，在前面自动补0，毫秒值要补双0（比如如，把 8 秒改成 08 秒）
				day = day < 10 ? "0" + day : day; //day小于10吗？如果小于，就补0；如果不小于，就是day本身
				hour = hour < 10 ? "0" + hour : hour;
				minu = minu < 10 ? "0" + minu : minu;
				sec = sec < 10 ? "0" + sec : sec;
				if (millsec < 10) {
					millsec = "00" + millsec;
				} else if (millsec < 100) {
					millsec = "0" + millsec;
				}
				//        console.log(day);
				//        console.log(parseInt(timeSum/1000/60/60/24));
				if (timeSum < 0) {
					div.innerHTML = "距离双11还有00天00小时00分00秒000毫秒";
					clearInterval(timer);
					return;
				}
				div.innerHTML = "距离双11还有" + day + "天" + hour + "小时" + minu + "分" + sec + "秒" + millsec + "毫秒";
			}
		</script>
	</body>
</html>

实现效果：

在这里插入图片描述

Jay·Yuen

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
16 - JavaScript内置对象：Date

内置对象简介内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。JavaScript的内置对象：内置对象对象说明Arguments函数参数集合Array数组Boolean布尔对象Date日期时间Error异常对象Function函数构造器Math数学对象Number数...
复制链接

扫一扫