JS Date对象

 js date对象在开发中经常需要，例如钉钉打卡，京东限时抢购等等：

  

 接下来我们从基础了解js date对象。

一、date对象基础

1.创建date对象

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

// 返回当前时间点
console.log(new Date());//Mon Mar 08 2021 22:03:33 GMT+0800 (中国标准时间)
// 表示传入年份字符串
console.log(new Date("2021"))//Fri Jan 01 2021 08:00:00 GMT+0800 (中国标准时间)
console.log(new Date("2021"))
//这样返回2001年估计是对象bug
console.log(new Date("3"))//Thu Mar 01 2001 00:00:00 GMT+0800 (中国标准时间)
// 这样写都表示2021三月5号凌晨12.
console.log(new Date("2021 03 05"))
console.log(new Date("2021 3 5"))
// 当传入数值参数时,必须传入年月两参数
console.log(new Date(2020,3))//Wed Apr 01 2020 00:00:00 GMT+0800 (中国标准时间)
console.log(new Date(2020))//Thu Jan 01 1970 08:00:02 GMT+0800 (中国标准时间)
// 当输入月份时,月份是从0开始算,0表示一月
console.log(new Date(2020,2,5,23,17,50))//Wed Apr 01 2020 00:00:00 GMT+0800 (中国标准时间)

二、date常用方法

 dateObj.get(set)Date() 获取（设置）月份中某一天

let date = new Date();
// 今天是202100309
console.log(date.getDate());//9
console.log(date.setDate(20));//1616202081402
console.log(new Date(date.setDate(20)))//Sat Mar 20 2021 09:01:21 GMT+0800 (中国标准时间)
console.log(new Date(date.setDate(20)).getDate())//20

dateObj.getDay() 获取（设置）一个周某一天

let date = new Date();
// 今天是202100309
console.log(date.getDay());//2 今天是星期二 没有setDay方法

dateObj.get(set)FullYear() 获取（设置）年份

let date = new Date();
// 今天是202100309
console.log(date.getFullYear());//2021
console.log(date.setFullYear(2050));//2530401084531
console.log(new Date(date.setFullYear(2050)));//Wed Mar 09 2050 09:11:24 GMT+0800 (中国标准时间)

dateObj.get(set)Hours() 获取（设置）小时数

let date = new Date();
console.log(date)//Tue Mar 09 2021 09:14:53 GMT+0800 (中国标准时间)
// 今天是202100309
console.log(date.getHours());//9
console.log(date.setHours(18));//1615284893938
console.log(new Date(date.setHours(18)));//Tue Mar 09 2021 18:14:53 GMT+0800 (中国标准时间)

dateObj.get(set)Milliseconds() 获取（设置）时间对象的毫秒数

let date = new Date();
console.log(date)//Tue Mar 09 2021 09:14:53 GMT+0800 (中国标准时间)
// 今天是202100309
console.log(date.getMilliseconds());//返回值区间是0~1000

dateObj.get(set)Minutes() 获取（设置）分钟

let date = new Date();
console.log(date)//Tue Mar 09 2021 09:22:06 GMT+0800 (中国标准时间)
// 今天是202100309
console.log(date.getMinutes());//22
console.log(date.setMinutes(50));//1615254606043
console.log(new Date(date.setMinutes(50)));//Tue Mar 09 2021 09:50:06 GMT+0800 (中国标准时间)

dateObj.get(set)Month() 获取（设置）月份

let date = new Date();
console.log(date)//Tue Mar 09 2021 09:22:06 GMT+0800 (中国标准时间)
// 今天是202100309
console.log(date.getMonth());//2 获取月份取值区间是[0,11] 即:2表示三月
console.log(date.setMonth(5));//1615254606043 这里是吧月份设置为6月份
console.log(new Date(date.setMonth(5)));//Tue Mar 09 2021 09:50:06 GMT+0800 (中国标准时间)

dateObj.get(set)Seconds() 获取（设置）秒

 

dateObj.get(set)Time() 获取对象的毫秒数/用传入的毫秒数来为对象设置时间 

let date = new Date();
console.log(date)//Tue Mar 09 2021 09:22:06 GMT+0800 (中国标准时间)
// 今天是202100309
console.log(date.getTime());//1615253961289
console.log(date.setTime(date.getTime()))//1615253961289

 UTC和GMT的区别与联系

三、日期格式化(moment.js)

console.log(new Date())//Tue Mar 09 2021 11:04:26 GMT+0800 (中国标准时间)
console.log(moment().format("YYYY年MM月DD日"))//2021年03月09日
console.log(moment(new Date(2020,4,20,5,20,20)).format("YYYY-M-DD hh:mm:ss"))//2020-5-20 05:20:20

 意思一下，更多方法请戳moment.js 的常用方法

四、date对象使用场景

1.获取本月第一天是星期几()

console.log(new Date())//Tue Mar 09 2021 11:54:51 GMT+0800 (中国标准时间)
console.log(new Date(new Date().setDate(1)).getDay())//1

2.两个时间点的倒计时

function countCown(endTime,timeDom,starTime = new Date()){
	
	let date = countTime();
	
	document.querySelector(timeDom).innerText =  calTime(date);
	
	var interval = setInterval(function(){
		
		document.querySelector(timeDom).innerText =  calTime(date);
		
		date <= 0 ? clearInterval(interval) : date--;
		
	},1000)
	
	
	function countTime(){
		return Math.floor( ( new Date(endTime).getTime() - new Date(starTime).getTime() ) / 1000 );
	}
	
	function calTime(timeSeconds){
		
		return parseInt(calDay(timeSeconds)) > 0 ? calDay(timeSeconds) + ":" + calHours(timeSeconds) + ":" + calMinutes(timeSeconds) + ":" + calSeconds(timeSeconds) : calHours(timeSeconds) + ":" + calMinutes(timeSeconds) + ":" + calSeconds(timeSeconds);
		
		function calDay(timeSeconds){
			return addZero(Math.floor(timeSeconds / (3600 * 24)));
		}
		
		function calHours(timeSeconds){
			return addZero(Math.floor(timeSeconds / 3600 % 24));
		}
		
		function calMinutes(timeSeconds){
			return addZero(Math.floor(timeSeconds / 60 % 60));
		}
		
		function calSeconds(timeSeconds){
			return addZero(Math.floor(timeSeconds % 60));
		}
		
		function addZero(num){
			return num < 10 ? "0" + num : num;
		}
	}
}

countCown(new Date(2021,4,10,15,46),".time")

3.某年某月有多少天

function calMonthDays(year,month){
	let now = new Date();
	year = year || now.getFullYear();
	if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){
	  return [31,29,31,30,31,30,31,31,30,31,30,31][month - 1||now.getMonth()];
	}else{
	  return [31,28,31,30,31,30,31,31,30,31,30,31][month - 1||now.getMonth()];
	}
}

console.log(calMonthDays())//啥也不传表示当前年份月份 今天2021.3.9 31
console.log(calMonthDays(2020,2))//29
console.log(calMonthDays(2021,2))//28
console.log(calMonthDays(2021,3))//31
console.log(calMonthDays(2021,4))//30

4.填充日历表当前页不属于本月的部分

function calMonthDays(year,month){
	let now = new Date();
	year = year || now.getFullYear();
	if((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0){
	  return [31,29,31,30,31,30,31,31,30,31,30,31][month||now.getMonth()];
	}else{
	  return [31,28,31,30,31,30,31,31,30,31,30,31][month||now.getMonth()];
	}
}

// 指定一个日期	
let date = new Date(2021,2,20);
//计算这个月多少天
let curMonthAllday = calMonthDays(date.getFullYear(),date.getMonth());
// 计算指定日期一号
let firstDay = new Date(date.setDate(1));
//计算指定日期最后一天
let lastDay = new Date(date.setDate(curMonthAllday));
//计算指定日期最后一天周几
let lastDayWeek = lastDay.getDay();
console.log(lastDay,lastDayWeek)

// 计算一号周
let beforDays = firstDay.getDay();
let calendarbox = [];
for(let i = 1; i < beforDays; i++){
	calendarbox.unshift(new Date(firstDay.setDate(firstDay.getDate() - 1)).getDate())
}
for(let i = 1; i <= curMonthAllday; i++){
	calendarbox.push(i)
}

for(let i = 6; i >= lastDayWeek; i--){
	calendarbox.push(7 - i)
}

console.log(calendarbox)
let timeStr = "";
for(let i = 0; i < calendarbox.length; i++){
	timeStr += `
${calendarbox[i]}
`
}

document.querySelector(".time").innerHTML = timeStr;

五、实例模仿

1.类似钉钉打卡时间跳动实现

$(() => {
	
	calNow()
	setInterval(() => {
		calNow();
	},1000)
	
	function calNow(){
		let now = new Date();
		let dataShow = addZero(now.getHours()) + ":" + addZero(now.getMinutes()) + ":" + addZero(now.getSeconds());
		$(".time_show").text(dataShow);
	}
	
	function addZero(num){
		return num < 10 ? "0" + num : num;
	}
	
})

2.类似京东抢购倒计时实现 

略...