菜单 搜索
首页 前端知识 js获取本周时间,当月的日期,计算两个时间差，距离当前日期后几天的日期

js获取本周时间,当月的日期,计算两个时间差，距离当前日期后几天的日期

2024-08-25 23:08:16 前端知识 前端哥 857 207 我要收藏

文章目录

  • 前言
  • 一、Date日期对象
  • 二 获取当前一周的日期
  • 三 获取当月的日期
  • 四 获取当月的总天数
  • 五 计算两个时间差
  • 六 距离当前日期后几天的日期
  • 七 获取星期
  • 八 获取时间字符串
  • 九 注意点

前言

本片文章主要记录一下遇到的问题，js计算当前一周的日期。感兴趣的小伙伴可以学习一下。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Date日期对象

Date()日期对象 是一个构造函数，必须使用new 来调用创建我们的日期对象使用Date日期对象的时候，如果里面没有放置参数，那么返回的就是系统的当前时间

常用方法说明
getFullYear()返回当前日期的年份
getMonth()返回当前日期的月份 但是返回值是在0-11，我们需要在获取到的月份上 进行+1的操作
getDate()返回的是当前日期的天数，也就是今天是几号
getDay()返回的是今天是星期几 周一返回的是1，周六返回的是6 但是周日返回的是0
getHours()返回的是当前的小时
getMinutes()返回的是当前的分钟数
getSeconds()返回的是当前的秒数
getTime()获取毫秒数
setFullYear()为指定日期设置年
setDate()设置指定的日期
setHours()设置指定日期设置小时
setMinutes()设置指定日期的分钟数
setSeconds()设置指定日期的秒数

二 获取当前一周的日期

要获取当前一周的日期，我们可以先计算周一的日期，然后通过for循环循环6次，就可以得到一周的时间。

  getWeeks() {
       let weeks = [];
       let currentDate = new Date();
       let day = currentDate.getDay();
       if (day === '0') {
             currentDate.setDate(currentDate.getDate() - 6);
          } else {
             currentDate.setDate(currentDate.getDate() - day + 1);
       }
         // 得到周一的日期
       let year = currentDate.getFullYear();
       let month = currentDate.getMonth() + 1 < 10 ? '0' + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1;
       let date = currentDate.getDate() < 10 ? '0' + currentDate.getDate() : currentDate.getDate();
       weeks.push(year + '-' + month + '-' + date);
            
      for (var i = 0; i < 6; i++) {
          currentDate.setDate(currentDate.getDate() + 1);
          year = currentDate.getFullYear();
          month = currentDate.getMonth() + 1 < 10 ? '0' + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1;
          date = currentDate.getDate() < 10 ? '0' + currentDate.getDate() : currentDate.getDate();
          weeks.push(year + '-' + month + '-' + date);
      }
          console.log(weeks);
   },

在这里插入图片描述

三 获取当月的日期

想要获取当月的日期，其实懂得了获取当前一周的时间，就好理解了，也是先计算当月的1号，在通过for循环循环当月的总天数。

init() {
    let monthList = [];
    let currentDate = new Date('2024-02-04');
    let year1 = currentDate.getFullYear();
    let month1 = currentDate.getMonth() + 1;
    let totalDate = new Date(year1, month1, 0).getDate();
    currentDate.setDate(1);
    // 得到1号的日期
    let year = currentDate.getFullYear();
    let month = currentDate.getMonth() + 1 < 10 ? '0' + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1;
    let date = currentDate.getDate() < 10 ? '0' + currentDate.getDate() : currentDate.getDate();
    monthList.push(year + '-' + month + '-' + date);

    for (var i = 0; i < totalDate - 1; i++) {
         currentDate.setDate(currentDate.getDate() + 1);
         year = currentDate.getFullYear();
         month = currentDate.getMonth() + 1 < 10 ? '0' + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1;
         date = currentDate.getDate() < 10 ? '0' + currentDate.getDate() : currentDate.getDate();
         monthList.push(year + '-' + month + '-' + date);
     }
        console.log(monthList);
  },

在这里插入图片描述

四 获取当月的总天数

new Date( 年 ，月 ，0 ).getDate() //即获取的是当月的总天数

let currentDate = new Date('2024-08-04');
let year = currentDate.getFullYear();
let month = currentDate.getMonth() + 1;
let totalDate = new Date(year, month, 0).getDate();
console.log('当前月份:' + month);
console.log('当月的总天数:' + totalDate);

在这里插入图片描述

五 计算两个时间差

先把两个时间转化成时间戳，在将两个时间戳相减

时间戳（Timestamp）是表示特定时间点的数值，通常以自1970年1月1日00:00:00UTC（协调世界时）以来的秒数或毫秒数来表示。这个时间点被称为Unix纪元（Unix epoch）。时间戳广泛用于计算机系统中，用于记录事件发生的精确时间。

  created() {
        this.getDiffDay('2024-02-01', '2024-03-01');
    },
   getDiffDay(startTime, endTime) {
       let start = new Date(startTime).getTime();
       let end = new Date(endTime).getTime();
       console.log(start, 'start');
       console.log(end, 'end');
       let diffTime = Math.abs(start - end);
       console.log(diffTime, 'diffTime');
       let diffDay = Math.floor(diffTime / 1000 / 60 / 60 / 24);
       console.log(diffDay, 'diffDay');
 },

在这里插入图片描述

六 距离当前日期后几天的日期

 created() {
        this.getTime(60);
    },
getTime(day) {
  let currentDate = new Date();
  let currentYear = currentDate.getFullYear();
  let currentMonth = currentDate.getMonth() + 1 < 10 ? '0' + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1;
  let currentDay = currentDate.getDate() < 10 ? '0' + currentDate.getDate() : currentDate.getDate();
  let currentTime = currentYear + '-' + currentMonth + '-' + currentDay;
  currentDate.setDate(currentDate.getDate() + day);
  let year = currentDate.getFullYear();
  let month = currentDate.getMonth() + 1 < 10 ? '0' + (currentDate.getMonth() + 1) : currentDate.getMonth() + 1;
  let date = currentDate.getDate() < 10 ? '0' + currentDate.getDate() : currentDate.getDate();
  console.log('距离' + currentTime + '后' + day + '天的日期：' + year + '-' + month + '-' + date);
 },

在这里插入图片描述

七 获取星期

/**
 * @description 获取星期
 * @param time {(Object|String|Number)} 时间 Sat Jan 01 2000 00:00:00 GMT+0800 (中国标准时间)
 * @returns {string}  星期一
 */
export function getWeek(time) {
  if (!time) {
    return ''
  }
  const date = getDate(time)
  if (!date) {
    return ''
  }
  const weekList = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  return weekList[date.getDay()]
}

八 获取时间字符串

/**
 * @description 获取时间字符串
 * @param time {(Object|String|Number)} 时间 Sat Jan 01 2000 00:00:00 GMT+0800 (中国标准时间)
 * @param pattern {String} 时间输出格式 yyyy-MM-dd HH:mm:ss
 * @returns {string}  2000-01-01 00:00:00
 */
export function getDateString(time, pattern = 'yyyy-MM-dd HH:mm:ss') {
    const date = getDate(time)
    if (!date) {
        return ''
    }
    const yyyy = date.getFullYear()
    const MM = (date.getMonth() + 1) > 9 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
    const dd = date.getDate() > 9 ? date.getDate() : '0' + date.getDate()
    const HH = date.getHours() > 9 ? date.getHours() : '0' + date.getHours()
    const mm = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()
    const ss = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds()
    let dateString = ''
    if (pattern === 'yyyy-MM-dd HH:mm:ss') {
        dateString = yyyy + '-' + MM + '-' + dd + ' ' + HH + ':' + mm + ':' + ss
    } else if (pattern === 'yyyy/MM/dd HH:mm:ss') {
        dateString = yyyy + '/' + MM + '/' + dd + ' ' + HH + ':' + mm + ':' + ss
    } else if (pattern === 'HH:mm:ss') {
        dateString = HH + ':' + mm + ':' + ss
    } else if (pattern === 'yyyy年MM月dd日') {
        dateString = yyyy + '年' + MM + '月' + dd + '日'
    } else if (pattern === 'yyyy-MM-dd') {
        dateString = yyyy + '-' + MM + '-' + dd
    }
    return dateString
}

九 注意点

1.date.setDate(dayValue)
date.setDate(dayValue)：设置指定日期对象 date 的月份中的某一天。如果 dayValue 大于该月的实际天数，日期会相应地进行调整（例如，将 2 月 30 日自动调整为 3 月 1 日）

let date = new Date("2024-08-01");
date.setDate(15);
console.log(date); // 输出：Wed Aug 15 2024 00:00:00 GMT+0800 (中国标准时间)

在上面的示例中，date.setDate(15) 将日期对象 date 的天数设置为 15，这意味着日期变为了 2024 年 8 月 15 日。

2.date.setDate(-2)

1.如果你调用 date.setDate(-2)，它会将日期设置为上个月的倒数第三天。
2.例如，假设当前日期是 2024 年 8 月 1 日，那么 date.setDate(-2) 将会将日期设置为 2024 年 7 月 29 日。

let date = new Date("2024-08-01");
date.setDate(-2);
console.log(date);

在这里插入图片描述
3 date.setDate(0)
如果当前日期对象 date 是在当前月的第一天，即 date 对象表示的是当月的第一天，例如 2024-08-01，那么 date.setDate(0) 将会把日期设置为上个月的最后一天

 let date = new Date('2024-08-01');
 date.setDate(0);
 console.log(date);

在这里插入图片描述
4 getMonth获取月份需要加1

let currentDate = new Date('2024-08-04');
let year = currentDate.getFullYear();
let month = currentDate.getMonth() + 1;
转载请注明出处或者链接地址：https://www.qianduange.cn//article/16837.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Vue学习JSON.parse(）与JSON.stringify(）对象与字符串互转

2024-09-04 23:09:44

LoopBack组件JSONAPI使用指南

2024-09-04 23:09:43

用了几年的 Fastjson，我最终替换成了Jackson！

2024-09-04 23:09:12

编译JSONCPP源码

2024-09-04 23:09:49

SpringBoot——请求响应（简单参数、实体参数、数组集合参数、日期参数、JSON参数、路径参数、统一响应结果）

2024-09-04 23:09:24

【OpenHarmony-NDK技术】简单将cJson移植到OpenHarmony中，并在c层修改参数值再返回json

2024-09-04 23:09:23

node.js如何使用JWT（JSON Web Token）进行认证？

2024-09-04 23:09:21

（最新亲测有效）python中操作json文件追加数据

2024-09-04 23:09:21

FastJson转化时BigDecimal与Double问题

2024-09-04 23:09:21

npm全局安装失败，报-4048错误（ -4048npm ERR! Error: EPERM: operation not permitted, open ‘D:\

2024-09-04 23:09:13

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
3

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
4

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
5

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
6

npm的使用

2024-08-18 00:08:131000
7

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
8

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
9

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
10

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！