首页 前端知识 JS的日期函数Date

JS的日期函数Date

2024-09-03 02:09:19 前端知识 前端哥 811 43 我要收藏

文章目录

  • 一、Date()函数讲解
  • 二、时间对象的方法
  • 三、设置时间对象的方法
  • 四、常用方法封装
    • 4.1、日期大小比较
    • 4.2、获取当前日期
    • 4.3、根据传入时间格式化时间
    • 4.4、获取今天日期往后推n天
    • 4.4、获取今天日期往后推n月
    • 4.5、前n天的日期,前n个月的日期

一、Date()函数讲解

Date()是一个专门用来创建时间对象的,是一个复杂数据类型,具有读写属性
语法: var time = new Date()
new Date() 返回值是一个对象
格式固定,并且时间是当前自己电脑的时间(只能获取当前本地的时间)

image.png

// 1.创建当前时间对象
var time = new Date(); //Tue Oct 17 2023 20:01:22 GMT+0800 (中国标准时间)
// 2.创建指定日期的时间对象,至少传递两个参数,分别是:年,月,日,时,分,秒,毫秒 需要注意的是这里的月是从0开始的
// 如果输入的数字超出范围会自定进位
var time = new Date(2023, 1, 1, 12, 30, 30, 999); //Wed Feb 01 2023 12:30:30 GMT+0800 (中国标准时间)
// 3.通过传递字符串创建,下面的月份是从1开始的
var time = new Date("2023-12-12 12:12:12"); //Tue Dec 12 2023 12:12:12 GMT+0800 (中国标准时间)
var time = new Date("2023/12/12 12:12:12"); //Tue Dec 12 2023 12:12:12 GMT+0800 (中国标准时间)
var time = new Date("2023/12/12"); //Tue Dec 12 2023 00:00:00 GMT+0800 (中国标准时间)
// 4.通过时间戳创建
var time = new Date(1666666666666); //Tue Oct 25 2022 10:57:46 GMT+0800 (中国标准时间)

二、时间对象的方法

1.getFullYear()
    语法:时间对象.getFullYear()
    返回值:获取当前年份信息  number数据类型
2.getMonth()
    语法:时间对象.getMonth()
    返回值:获取当前月份信息,0-11 number数据类型
3.getDate()
    语法:时间对象.getDate()
    返回值:获取当前日信息 1-31 number数据类型
4.getHours()
    语法:时间对象.getHours()
    返回值:获取当前小时信息,0-23 number数据类型
5.getMinutes()
    语法:时间对象.getMinutes()
    返回值:获取当前分钟信息 0-59  number数据类型
6.getSeconds()
    语法:时间对象.getSeconds()
    返回值:获取当前秒钟信息,0-59 number数据类型
7.getMilliseconds()
    语法:时间对象.getMilliseconds()
    返回值:获取当前毫秒信息 0-999 number数据类型
    //前面多了个UTC获取到的是标准时间,中国时区会多8小时
8.getUTCFullYear()
    语法:时间对象.getUTCFullYear()
    返回值:获取UTC模式下的年份信息  number数据类型
9.getUTCMonth()
    语法:时间对象.getUTCMonth()
    返回值:获取UTC模式下的月份信息,0-11 number数据类型
10.getUTCDate()
    语法:时间对象.getUTCDate()
    返回值:获取UTC模式下的日信息 1-31 number数据类型
11.getUTCHours()
    语法:时间对象.getUTCHours()
    返回值:获取UTC模式下的小时信息,0-23 number数据类型
12.getUTCMinutes()
    语法:时间对象.getUTCMinutes()
    返回值:获取UTC模式下的分钟信息 0-59  number数据类型
13.getUTCSeconds()
    语法:时间对象.getUTCSeconds()
    返回值:获取UTC模式下的秒钟信息,0-59 number数据类型
14.getUTCMilliseconds()
    语法:时间对象.getUTCMilliseconds()
    返回值:获取UTC模式下的毫秒信息 0-999 number数据类型
15.getDay()
    语法:时间对象.getDay()
    返回值:该时间对象的周信息,0-6 number数据类型
16.getTime()
    语法:时间对象.getTime()
    返回值:该时间对象的时间戳, number数据类型
    //时间对象到时间元年过了多少毫秒

三、设置时间对象的方法

1.setFullYear()
    语法:时间对象.setFullYear(要设置的年)
    作用:修改该对象的年份信息
2.setMonth()
    语法:时间对象.setMonth(要设置的)
    作用:修改该对象的月份信息,0-11 
3.setDate()
    语法:时间对象.setDate(要设置的)
    作用:修改该对象的日信息 1-31 number数据类型
4.setHours()
    语法:时间对象.setHours(要设置的)
    作用:修改该对象的小时信息,0-23 number数据类型
5.setMinutes()
    语法:时间对象.setMinutes(要设置的)
    作用:修改该对象的分钟信息 0-59  number数据类型
6.setSeconds()
    语法:时间对象.setSeconds(要设置的)
    作用:修改该对象的秒钟信息,0-59 number数据类型
7.setMilliseconds()
    语法:时间对象.setMilliseconds(要设置的)
    作用:修改该对象的毫秒信息 0-999 number数据类型
//还有一套一样的 前面多了个UTC设置标准时间,中国时区会多8小时
//时间对象.setUTCxxxx()    
8.setDay()
    语法:时间对象.setDay(要设置的)
    作用:修改该对象的周几信息,0-6 number数据类型
9.setTime()
    语法:时间对象.setTime(时间戳)
    作用:直接定位到指定时间
    //时间对象到时间元年过了多少毫秒

四、常用方法封装

4.1、日期大小比较

const time1 = "2022-03-05 12:05:01";
const time2 = "2022-08-05 12:05:03";
function compareTime(time1, time2) {
 return new Date(time1) > new Date(time2);
}
compareTime(time1, time2); //false

4.2、获取当前日期

function padZero(num) {
  return num > 9 ? num : `0${num}`;
}

function getCurrentTime() {
  const date = new Date();
  const year = date.getFullYear();
  const month = padZero(date.getMonth() + 1);
  const day = padZero(date.getDate());
  const hour = padZero(date.getHours());
  const min = padZero(date.getMinutes());
  const second = padZero(date.getSeconds());
  return `${year}-${month}-${day} ${hour}:${min}:${second}`;
}
getCurrentTime(); //'2023-10-17 20:20:10'

4.3、根据传入时间格式化时间

function padZero(num) {
  return num > 9 ? num : `0${num}`;
}

function formateTime(timeStr) {
  const date = new Date(timeStr);
  const year = date.getFullYear();
  const month = padZero(date.getMonth() + 1);
  const day = padZero(date.getDate());
  const hour = padZero(date.getHours());
  const min = padZero(date.getMinutes());
  const second = padZero(date.getSeconds());
  return `${year}-${month}-${day} ${hour}:${min}:${second}`;
}
formateTime('2023/10/17 20:20:10'); //'2023-10-17 20:20:10'

4.4、获取今天日期往后推n天

  • 安装moment
npm install moment -S
import moment from "moment";
/**
 * 获取后n天日期
 */
export function getNextNDay(n = 1) {
  //n  为往后n天日期
  const date = new Date();
  const startDate = moment(date)
    .add(n, "days")
    .startOf("days")
    .format("YYYY-MM-DD");
  const lastDate = startDate.split("-");
  const nextyear = lastDate[0];
  const nextMonth = lastDate[1];
  const nextDay = lastDate[2];
  // 结束日期
  return nextyear + "-" + nextMonth + "-" + nextDay;
}

4.4、获取今天日期往后推n月

  • 安装moment
npm install moment -S
import moment from "moment";
/**
 * 获取后n个月的日期
 */
export function getNextNMonth(n = 1) {
  //n  为往后几个月
  const date = new Date();
  const startDate = moment(date)
    .add(n, "month")
    .startOf("month")
    .format("YYYY-MM");
  const lastDate = startDate.split("-");
  const nextyear = lastDate[0];
  const nextMonth = lastDate[1];
  // 结束日期
  return nextyear + "-" + nextMonth;
}

4.5、前n天的日期,前n个月的日期

安装moment.js插件

npm install moment --save
import moment from "moment";
/**
 * 近N天 -moment.js
 */
export function getRecentDay(n) {
  return moment(new Date()).subtract(n, "days").format("YYYY-MM-DD");
}
// 近N月 - Moment.js
export function getRecentMonth(n) {
  return moment(new Date()).subtract(n, "months").format("YYYY-MM-DD");
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/17510.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!