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
下面是个方法都返回毫秒数:
console.log(new Date().valueOf())//1615698353800
console.log(new Date().getTime())//1615698353809
console.log(Date.now())//1615698353810
console.log(Date.now())//1615698353812
三、日期格式化(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 += `<div class="time_item">${calendarbox[i]}</div>`
}
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.类似京东抢购倒计时实现
略...