一、Date对象
什么是Date对象?
Date对象用于处理日期和时间,Date对象记录着从1970年1月1日00:00:00开始以来的毫秒数。(也就是格林威治时间)
至于什么是格林威治事件,欢迎大家去看我的另一篇文章
Date 是一个构造函数
1、获取当前时间 (北京时间) 不传参数
var d = new Date();
console.log(d); // Thu Dec 05 2018 23:38:54 GMT+0800 (中国标准时间)
2、设置时间
1). 传一个时间格式的字符串 "2018-11-11 00:00:00:111" => (中国格式的时间)
var date = new Date("2018-11-11 00:00:00:111"); // 我们比较熟悉 但是一旦格式出错返回无效日期
console.log(date); Mon Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)
var date = new Date("2018-13-11 00:00:00:111"); // 传入不存在的日期
console.log(date); //Invalid Date 无效日期
2). 多参数传参 用逗号分隔 => 外国格式的时间 (月份 从0开始 0-11月, 一周的 第一天 从 星期天开始 0-6 )
var date = new Date(2018, 11, 11, 0, 0, 0); // 2018 12 11
console.log(date); // Tue Dec 11 2018 00:00:00 GMT+0800 (中国标准时间)
如果时间超出范围 会自动进行换算
月份(0-11) 超出向下一个年换算
var date = new Date(2018, 13, 11, 0, 0, 0);
console.log(date); //2018-13-11 => 2019-2-11
日期超出向下一个月换算
var date = new Date(2018, 11, 32, 0, 0, 0);
console.log(date); // 2018-12-32 => 2019-1-1
日期为0 或者为 负数 向上个月换算
var date = new Date(2018, 11, 0, 0, 0, 0); // 2018-12-0 => 2019-11-30
console.log(date);
// -1 0 1
var date = new Date(2018, 11, -1, 0, 0, 0); // 2018-12-(-1) => 2019-11-29
console.log(date);
3). 传一个数字(毫秒数)
var date = new Date(36000);
console.log(date); // Thu Jan 01 1970 08:00:36 GMT+0800 (中国标准时间)
4). 传一个日期对象(和第三种方法类似) 得到一个与原日期相同的新的日期(对象)
var date = new Date();
var d1 = new Date(date);
console.log(date); // Thu Dec 05 2018 23:54:40 GMT+0800 (中国标准时间)
console.log(d1); // Thu Dec 05 2018 23:54:40 GMT+0800 (中国标准时间)
console.log(d1 === date); // false
3、日期对象转毫秒
1. 隐式类型转化(- * / %)
var date = new Date(2018, 10, 11, 0, 0, 0);
var ms = date * 1;
console.log(ms); // 1541865600000
var d1 = new Date(ms);
console.log(d1); // Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)
二、日期对象的拓展方法
var date = new Date("2018-11-11 0:0:0");
console.log(date); // Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)
1、获取
获取年份
var year = date.getFullYear();
console.log(year); //2018
var month = date.getMonth();
console.log(month); // 10 => 始终是外国格式的月份
获取日期
var day = date.getDate();
console.log(day); // 11
获取星期
var week = date.getDay();
console.log(week); // 0 (星期日)
获取 hour 小时
var hour = date.getHours();
console.log(hour); // 0
获取 minute 分钟
var minute = date.getMinutes();
console.log(minute); // 0
获取 second 秒
var second = date.getSeconds();
console.log(second); // 0
获取 millisecond 毫秒
var millisecond = date.getMilliseconds();
console.log(millisecond); // 0
获取日期对应毫秒数
var ms = date.getTime();
console.log(ms); 1541865600000
console.log(date * 1); 1541865600000
2、设置
var date = new Date("2018-11-11 0:0:0");
console.log(date);
返回值 都是 更新之后的时间的毫秒数
是否影响原日期 都会 影响
设置年份
返回值 设置年份之后时间的毫秒数
是否影响原日期 影响
var result = date.setFullYear(2022);
console.log(result); //1668096000000
console.log(date); // Fri Nov 11 2022 00:00:00 GMT+0800 (中国标准时间)
设置月份
返回值 更新之后需时间的毫秒数
是否影响原日期 影响
var result = date.setMonth(13);
console.log(result); // 1549814400000
console.log(date); // Mon Feb 11 2019 00:00:00 GMT+0800 (中国标准时间)
设置日期
常规设置
date.setDate(11);
console.log(date); // Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)
特殊设置
date.setDate(0); // 上个月的最后一天
console.log(date); // Wed Oct 31 2018 00:00:00 GMT+0800 (中国标准时间)
date.setDate(32); //下个月的第一天或第二天
console.log(date); // Thu Nov 01 2018 00:00:00 GMT+0800 (中国标准时间)
注意 星期 只能获取 不能设置
date.setHours(18);
console.log(date); Sun Nov 11 2018 18:00:00 GMT+0800 (中国标准时间)
date.setMinutes(30);
date.setSeconds(30);
date.setMilliseconds(111);
console.log(date);
3、日期的深复制
var d1 = new Date(date); //新日期
d1.setMonth(11);
console.log(d1); // Tue Dec 11 2018 00:00:00 GMT+0800 (中国标准时间)
console.log(date); // Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)
修改深复制后的新日期对象,不会再影响之前的日期对象
三、案例
我会把小案例直接放在博客里,稍微有意思的复杂的案例我会放在博客的实例里
简易时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="showTime"></div>
</body>
<script>
var showTime = document.getElementById("showTime")
getTime();
var timer = setInterval(function () {
getTime();
}, 1000)
function getTime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1; // 月份 日期 小时 分钟和 秒 小于 10 的时候手动拼接0
month = beautify(month);
var day = date.getDate();
day = beautify(day);
var week = date.getDay(); //星期天 取值为 0
var hour = date.getHours();
hour = beautify(hour);
var minute = date.getMinutes();
minute = beautify(minute);
var second = date.getSeconds();
second = beautify(second);
var weekList = ["日", "一", "二", "三", "四", "五", "六"];
showTime.innerHTML = year + "年" + month + "月" + day + "日星期" + weekList[week] + " " + hour + ":" + minute + ":" + second;
}
function beautify(num) {
return num = (num < 10 ? "0" + num : num);
}
</script>
</html>