js+new Date()+moment+时区

文章目录

    • 概要
    • 一、Date对象基础知识
      • 1. 创建Date对象
      • 2. 获取日期和时间信息
      • 3. 设置日期和时间
    • 二、Date对象的应用
      • 1. 日期格式化
      • 2. 时间差计算
      • 3. 倒计时功能
    • moment.js
    • moment 常见场景应用
    • 时区差别
      • 亚洲
      • 欧洲
      • 美洲
      • 大洋洲
    • 时区时间说明

概要

一、Date对象基础知识

1. 创建Date对象

  • 无参数创建
    • 使用new Date()可以创建一个代表当前日期和时间的Date对象。例如:
    let currentDate = new Date();
    console.log(currentDate); 
    
    • 输出的内容类似Fri Nov 22 2024 12:00:00 GMT+0800 (中国标准时间),具体的时间部分(小时、分钟、秒等)会根据当前实际时间显示。
  • 指定日期和时间创建
    • 可以传入日期和时间相关的参数来创建指定时间的Date对象。
    • 传入毫秒数:Date对象内部以从1970年1月1日00:00:00 UTC开始计算的毫秒数来存储日期和时间。例如,let specificDate = new Date(0);创建的是1970年1月1日00:00:00 UTC对应的Date对象,因为参数0代表从1970年1月1日00:00:00 UTC开始的0毫秒。
    • 传入日期字符串:可以传入符合特定格式的日期字符串,如"YYYY - MM - DD"(年 - 月 - 日)或"YYYY/MM/DD"等格式。例如,let anotherDate = new Date("2024-01-01");创建了一个代表2024年1月1日00:00:00本地时间的Date对象。不过需要注意的是,浏览器对日期字符串格式的解析可能会有一些差异。
    • 传入多个数字参数:按照年、月、日、小时、分钟、秒、毫秒的顺序传入参数。例如,let customDate = new Date(2024, 10, 22, 14, 30, 0, 0);创建了一个代表2024年11月22日14:30:00(因为月份是从0开始计数,所以10代表11月)的Date对象。

2. 获取日期和时间信息

  • 获取年、月、日等信息
    • getFullYear():返回日期中的年份,例如currentDate.getFullYear()返回2024(假设currentDate是当前日期)。
    • getMonth():返回日期中的月份,范围是0 - 11,0代表一月,1代表二月,以此类推。所以如果要得到实际的月份,需要在返回值上加1。例如,currentDate.getMonth() + 1可以得到当前月份。
    • getDate():返回日期中的日,范围是1 - 31。例如,currentDate.getDate()返回当前日期是几号。
    • getHours()getMinutes()getSeconds()getMilliseconds()分别用于获取小时、分钟、秒和毫秒信息。
  • 获取星期几信息
    • getDay():返回日期对应的星期几,0代表星期日,1代表星期一,以此类推。例如,currentDate.getDay()可以得到今天是星期几。

3. 设置日期和时间

  • 设置年、月、日等信息
    • setFullYear(year, [month], [date]):用于设置年份,可选择性地设置月份和日期。例如,currentDate.setFullYear(2025)currentDate对象的年份设置为2025年,月份和日期保持不变。如果提供了月份和日期参数,也会相应地进行设置。
    • setMonth(month, [date]):设置月份,可选择性地设置日期。需要注意月份范围是0 - 11。例如,currentDate.setMonth(11)将月份设置为12月(因为0代表1月)。
    • setDate(date):设置日期中的日,范围是1 - 31。例如,currentDate.setDate(1)将日期设置为1号。
    • 类似地,有setHours()setMinutes()setSeconds()setMilliseconds()用于设置小时、分钟、秒和毫秒。

二、Date对象的应用

1. 日期格式化

  • 简单的格式化函数
    • 可以编写一个函数将Date对象格式化为常见的日期格式,如YYYY - MM - DD HH:MM:SS
    function formatDate(date) {
        let year = date.getFullYear();
        let month = (date.getMonth() + 1).toString().padStart(2, '0');
        let day = date.getDate().toString().padStart(2, '0');
        let hours = date.getHours().toString().padStart(2, '0');
        let minutes = date.getMinutes().toString().padStart(2, '0');
        let seconds = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }
    let currentDate = new Date();
    console.log(formatDate(currentDate));
    
    • 在这个函数中,padStart()方法用于在字符串前面填充0,以保证月份、日期等数字格式是两位数。

2. 时间差计算

  • 计算两个日期之间的时间差(以毫秒为单位)
    • 例如,计算从一个日期到另一个日期过去了多少毫秒。
    let startDate = new Date("2024-01-01");
    let endDate = new Date("2024-02-01");
    let diffInMilliseconds = endDate - startDate;
    console.log(diffInMilliseconds);
    
    • 可以进一步将毫秒转换为天、小时、分钟等单位。例如,要将毫秒转换为天数,可以使用diffInDays = diffInMilliseconds / (1000 * 60 * 60 * 24)

3. 倒计时功能

  • 简单的倒计时示例
    • 假设要实现一个倒计时到某个特定日期的功能,比如倒计时到2025年1月1日。
    function countdown() {
        let targetDate = new Date("2025-01-01");
        let currentDate = new Date();
        let diffInMilliseconds = targetDate - currentDate;
        let days = Math.floor(diffInMilliseconds / (1000 * 60 * 60 * 24));
        let hours = Math.floor((diffInMilliseconds % (1000 * 60 * 60 * 24))
         / (1000 * 60 * 60));
        let minutes = Math.floor((diffInMilliseconds % (1000 * 60 * 60))
         / (1000 * 60));
        let seconds = Math.floor((diffInMilliseconds % (1000 * 60)) / 1000);
        console.log(`距离2025年1月1日还有:${days}${hours}小时 
        ${minutes}分钟 ${seconds}`);
    }
    countdown();
    
    • 这个函数先计算出目标日期和当前日期的时间差,然后将时间差分别转换为剩余的天数、小时数、分钟数和秒数,并打印出来。可以通过setInterval(countdown, 1000)来每秒更新一次倒计时。

moment.js

  1. 安装和引入
    • 安装
      • 如果使用npm进行项目管理,可以在项目目录下的终端中运行npm install moment来安装moment.js库。
    • 引入
      • 在HTML文件中,可以通过<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>这种方式从CDN引入moment.js
      • 在JavaScript模块中,使用import moment from 'moment';引入(如果是在支持ES6模块的环境下)。
  2. 日期格式化
    • 基本格式
      • moment()函数可以创建一个代表当前日期和时间的moment对象。例如,let now = moment();就获取了当前时间对应的moment对象。
      • 可以使用format()方法来格式化日期。常见的格式化字符包括YYYY(四位年份)、MM(两位月份)、DD(两位日期)、HH(24小时制的两位小时数)、mm(两位分钟数)、ss(两位秒数)。例如:
      let now = moment();
      console.log(now.format('YYYY - MM - DD HH:mm:ss'));
      
      • 输出类似于2024 - 11 - 22 14:30:00(具体时间根据当前时间而定)。
    • 相对时间格式
      • moment.js还可以输出相对时间格式。例如,fromNow()方法可以输出从某个日期到现在的相对时间描述。
      let aWeekAgo = moment().subtract(7, 'days');
      console.log(aWeekAgo.fromNow());
      
      • 输出可能是7 days ago,如果日期是未来的时间,会输出类似in 3 days的内容。
  3. 日期操作
    • 增减时间单位
      • 可以方便地对日期进行增减操作。例如,add()subtract()方法可以用于增加或减少时间单位。
      let tomorrow = moment().add(1, 'days');
      console.log(tomorrow.format('YYYY - MM - DD'));
      let yesterday = moment().subtract(1, 'days');
      console.log(yesterday.format('YYYY - MM - DD'));
      
      • 上述代码分别获取了明天和昨天的日期,并以YYYY - MM - DD格式输出。除了days,还可以对yearsmonthshoursminutesseconds等时间单位进行操作。
    • 设置日期和时间
      • set()方法可以用于设置日期和时间的具体值。例如:
      let customDate = moment();
      customDate.set('year', 2025).set('month', 0).set('date', 1);
      console.log(customDate.format('YYYY - MM - DD'));
      
      • 这段代码将日期设置为2025年1月1日,并输出格式化后的日期。
  4. 日期比较
    • 比较两个日期的先后顺序
      • isBefore()isAfter()isSame()方法可以用于比较两个日期。
      let date1 = moment('2024-01-01');
      let date2 = moment('2024-02-01');
      console.log(date1.isBefore(date2));// true
      console.log(date1.isAfter(date2));// false
      console.log(date1.isSame(date2));// false
      
    • 获取时间差
      • diff()方法可以计算两个日期之间的差值。例如,计算两个日期相差的天数:
      let startDate = moment('2024-01-01');
      let endDate = moment('2024-02-01');
      let diffInDays = endDate.diff(startDate, 'days');
      console.log(diffInDays);
      
      • 输出为31,因为从2024年1月1日到2024年2月1日相差31天。除了days,还可以计算其他时间单位的差值,如yearsmonthshours等。
  5. 本地化和国际化应用
    • 设置语言环境
      • moment.locale()方法可以设置语言环境。例如,设置为中文环境:
      moment.locale('zh - cn');
      let now = moment();
      console.log(now.format('LLLL'));
      
      • 输出的日期格式会符合中文习惯,如2024年11月22日星期四下午2点30分(具体时间部分根据当前时间而定)。
    • 加载语言包
      • 如果要使用多种语言环境,需要加载相应的语言包。可以通过npm安装moment - locale - [language - code](如moment - locale - fr用于法语),然后在代码中加载。例如:
      import moment from 'moment';
      import 'moment/locale/fr';
      moment.locale('fr');
      let now = moment();
      console.log(now.format('LLLL'));
      
      • 这样就可以输出符合法语习惯的日期格式。

moment 常见场景应用

  1. 时间区间处理
    • 时间段计算
      • Moment.js可以方便地处理时间区间相关的操作。例如,计算两个日期之间的时间区间内包含多少个完整的星期。
      let startDate = moment('2024-01-01');
      let endDate = moment('2024-03-01');
      let diffInWeeks = endDate.diff(startDate, 'weeks');
      console.log(diffInWeeks);
      
      • 这里计算出从2024年1月1日到2024年3月1日之间大约包含8个完整的星期(具体数值根据日期计算)。
    • 判断日期是否在区间内
      • 可以判断一个日期是否在给定的时间区间内。例如,有一个活动时间区间是从2024年11月1日到2024年11月30日,判断当前日期是否在这个区间内。
      let activityStart = moment('2024-11-01');
      let activityEnd = moment('2024-11-30');
      let currentMoment = moment();
      if (currentMoment.isBetween(activityStart, activityEnd)) {
          console.log('当前日期在活动时间区间内');
      } else {
          console.log('当前日期不在活动时间区间内');
      }
      
  2. 日期排序与分组
    • 日期排序
      • 当有一组日期需要排序时,Moment.js可以提供帮助。例如,有一个日期数组,需要按照日期先后顺序进行排序。
      let datesArray = [moment('2024-03-01'), moment('2024-01-01'), 
      moment('2024-02-01')];
      datesArray.sort((a, b) => a.diff(b));
      datesArray.forEach(date => console.log(date.format('YYYY - MM - DD')));
      
      • 首先,通过sort函数和diff方法来比较日期大小,实现日期的排序。然后,遍历排序后的日期数组并输出格式化后的日期,输出结果将是按照日期先后顺序排列的。
    • 日期分组
      • 根据日期的某个属性(如月份或年份)对日期进行分组。例如,将一组日期按照月份进行分组。
      let dateList = [moment('2024-01-01'), moment('2024-02-01'),
       moment('2024-02-15'), moment('2024-03-01')];
      let groupedByMonth = {};
      dateList.forEach(date => {
          let monthKey = date.format('YYYY - MM');
          if (!groupedByMonth[monthKey]) {
              groupedByMonth[monthKey] = [];
          }
          groupedByMonth[monthKey].push(date);
      });
      console.log(groupedByMonth);
      
      • 首先定义一个空对象groupedByMonth,然后遍历日期列表。对于每个日期,获取其年份 - 月份格式的字符串作为键。如果这个键在对象中不存在,就创建一个空数组。最后,将日期添加到对应的月份数组中。这样就实现了按照月份对日期进行分组,输出的groupedByMonth对象将包含按照月份分组后的日期数组。
  3. 复杂的时间计算和业务逻辑支持
    • 工作时间计算
      • 在业务场景中,例如计算一个任务在工作时间(假设周一到周五,每天9点 - 17点)内的剩余时间。
      let taskStartTime = moment('2024-11-22 15:00');
      let taskEndTime;
      let currentTime = moment();
      let isWorkingDay = currentTime.day() >= 1 && currentTime.day() <= 5;
      let isWorkingHours = currentTime.hour() >= 9 && currentTime.hour() < 17;
      if (isWorkingDay && isWorkingHours) {
          if (taskStartTime.isBefore(currentTime)) {
              taskEndTime = moment().endOf('day').hour(17).minute(0).second(0);
          } else {
              taskEndTime = taskStartTime.clone().endOf('day').hour(17)
              .minute(0).second(0);
          }
          let remainingTime = taskEndTime.diff(currentTime);
          console.log(`任务剩余时间为:${moment.duration(remainingTime)
          .humanize()}`);
      } else {
          console.log('当前不在工作时间内');
      }
      
      • 首先判断当前时间是否是工作时间。如果是,再判断任务开始时间是否已经过去。然后根据情况计算任务的结束时间(当天17点),最后计算剩余时间并以人性化的方式(如2 hours left)输出。
    • 周期性事件计算
      • 对于周期性事件,比如每个月的第一天提醒用户做某事。可以通过Moment.js来判断当前日期是否是每个月的第一天。
      let currentDate = moment();
      if (currentDate.date() === 1) {
          console.log('今天是本月第一天,提醒您执行操作');
      }
      

时区差别

以下是一些常见地区与北京时间的时区差值统计:

亚洲

  • 日本:日本采用东九区时间(UTC+09:00),与北京时间(东八区,UTC+08:00)相差1小时.
  • 韩国:韩国同样采用东九区时间,与北京时间相差1小时 。
  • 印度:印度采用东5.5区时间(UTC+05:30),与北京时间相差2.5小时.

欧洲

  • 英国:英国采用零时区时间(UTC±00:00),与北京时间相差8小时.
  • 法国:法国采用东一区时间(UTC+01:00),与北京时间相差7小时 。
  • 德国:德国采用东一区时间,与北京时间相差7小时 。

美洲

  • 美国东部:美国东部时间为西五区时间(UTC-05:00),与北京时间相差13小时。但在夏令时期间,美国东部时间会调快1小时,此时与北京时间相差12小时.
  • 美国中部:美国中部时间为西六区时间(UTC-06:00),与北京时间相差14小时。夏令时期间,相差13小时 。
  • 美国西部:美国西部时间为西八区时间(UTC-08:00),与北京时间相差16小时。夏令时期间,相差15小时 。
  • 加拿大:加拿大跨多个时区,如东部的多伦多等地采用西五区时间,与北京时间相差13小时;西部的温哥华等地采用西八区时间,与北京时间相差16小时 。

大洋洲

  • 澳大利亚东部:澳大利亚东部采用东十区时间(UTC+10:00),与北京时间相差2小时 。
  • 澳大利亚西部:澳大利亚西部采用东八区时间,与北京时间无时差 。
  • 新西兰:新西兰采用东十二区时间(UTC+12:00),与北京时间相差4小时.

时区时间说明

  1. 地球自转与时区时间先后顺序
    • 地球自西向东自转,这就导致东边的地区会比西边的地区更早看到太阳,时间也就更早。因此,在地球上越往东的地区,时间越快。
  2. 时区划分与时间比较示例
    • 时区是按照经度划分的,全球共划分为24个时区。以本初子午线(0°经线)为中心,向东、向西各7.5°为零时区。然后从零时区的边界分别向东、向西,每隔15°划分一个时区。
    • 例如,当北京时间(东八区)是上午10点的时候,位于其东边的日本(东九区)时间是上午11点,而位于其西边的印度(东5.5区)时间约是上午7点30分。所以从时间快慢的角度来说,东边(如东北方向的日本相对于中国)的时间更快,西边(如印度相对于中国)的时间更慢。
  3. 特殊情况说明
    • 不过,需要注意的是在计算日期变更时,存在国际日期变更线。这条线大致沿着180°经线,当从东向西越过这条线时,日期要加一天;从西向东越过这条线时,日期要减一天。这是为了避免在环球旅行等情况下出现日期混乱的问题。例如,从亚洲向东跨越太平洋到达美洲时,会经过国际日期变更线,日期会发生变化,而不是单纯按照东边时间快的原则来计算。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/921419.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

大数据调度组件之Apache DolphinScheduler

Apache DolphinScheduler 是一个分布式易扩展的可视化 DAG 工作流任务调度系统。致力于解决数据处理流程中错综复杂的依赖关系&#xff0c;使调度系统在数据处理流程中开箱即用。 主要特性 易于部署&#xff0c;提供四种部署方式&#xff0c;包括Standalone、Cluster、Docker和…

使用 前端技术 创建 QR 码生成器 API1

前言 QR码&#xff08;Quick Response Code&#xff09;是一种二维码&#xff0c;于1994年开发。它能快速存储和识别数据&#xff0c;包含黑白方块图案&#xff0c;常用于扫描获取信息。QR码具有高容错性和快速读取的优点&#xff0c;广泛应用于广告、支付、物流等领域。通过扫…

Hash table类算法【leetcode】

哈希表中关键码就是数组的索引下标&#xff0c;然后通过下标直接访问数组中的元素 那么哈希表能解决什么问题呢&#xff0c;一般哈希表都是用来快速判断一个元素是否出现集合里。 例如要查询一个名字是否在这所学校里。 要枚举的话时间复杂度是O(n)&#xff0c;但如果使用哈希…

UI自动化测试中公认最佳的设计模式-POM

一、概念 什么是POM&#xff1f; POM是PageObjectModule&#xff08;页面对象模式&#xff09;的缩写&#xff0c;其目的是为了Web UI测试创建对象库。在这种模式下&#xff0c;应用涉及的每一个页面应该定义为一个单独的类。类中应该包含此页面上的页面元素对象和处理这些元…

Elasticsearch客户端在和集群连接时,如何选择特定的节点执行请求的?

大家好&#xff0c;我是锋哥。今天分享关于【Elasticsearch客户端在和集群连接时&#xff0c;如何选择特定的节点执行请求的&#xff1f;】面试题。希望对大家有帮助&#xff1b; Elasticsearch客户端在和集群连接时&#xff0c;如何选择特定的节点执行请求的&#xff1f; 100…

Python数据结构day2

一、链表 1.1目的 解决顺序表存储数据有上限&#xff0c;并且插入和删除操作效率低的问题 1.2概念 链表&#xff1a;链式存储的线性表&#xff0c;使用随机物理内存存储逻辑上连续的数据 链表的组成&#xff1a;由一个个结点组成 结点&#xff1a;由数据域和链接域组成&a…

【经纬度转地址实现方案】根据给定的经纬度,查询对应城市,通过建立经纬度geohash-行政区映射表,实现快速查询

文章目录 背景目标方案设计&#xff1a;表结构设计&#xff1a;方案实现1.高德API获取行政区边界点2.外包矩形中心作为中心点3.坐标点经纬度转换为geohash 测试建表语句测试造数测试用例测试结果 总结总结 背景 最近遇到一个需求&#xff0c;需要查询给定的经纬度坐标点&#…

解锁业务成功:大数据和 AI 如何协作以释放战略洞察

在当今这个数据主导的时代&#xff0c;大数据与AI的协同作用对于寻求竞争优势的组织而言愈发关键。大数据以其庞大的数据量、多样化的数据类型以及高速的数据生成能力&#xff0c;为AI算法提供了丰富的原材料&#xff0c;助力其挖掘出有价值的洞见&#xff0c;推动明智决策的制…

LINUX系统编程之——环境变量

目录 环境变量 1、基本概念 2、查看环境变量的方法 三、查看PATH环境变量的內容 1&#xff09;不带路径也能运行的自己的程序 a、将自己的程序直接添加到PATH指定的路径下 b、将程序所在的路径添加到PATH环境中 四、环境变量与本地变量 1、本地变量创建 2、环境变量创…

QT:QListView实现table自定义代理

介绍 QListVIew有两种切换形式&#xff0c;QListView::IconMode和QListView::ListMode&#xff0c;通过setViewMode()进行设置切换。因为QListView可以像QTreeView一样显示树形结构&#xff0c;也可以分成多列。这次目标是将ListView的ListMode形态显示为table。使用代理&…

IDEA2023 创建SpringBoot项目(一)

一、Spring Boot是由Pivotal团队提供的全新框架&#xff0c;其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置&#xff0c;从而使开发人员不再需要定义样板化的配置。 二、快速开发 1.打开IDEA选择 File->New->Project 2、…

初级数据结构——树

目录 前言一、树的基本概念二、二叉树三、树的表示方法四、树的遍历树的代码模版五、经典例题[2236. 判断根结点是否等于子结点之和](https://leetcode.cn/problems/root-equals-sum-of-children/description/)代码题解 六、总结结语 前言 从这一期开始数据结构开始有那么一点…

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色,类似材质丢失

Unity 编辑器下 Android 平台 Addressable 加载模型粉红色&#xff0c;类似材质丢失 Addressable Play Mode Script加载模式 选择 Use Existiing Build 1.Unity 切换到 PC 平台&#xff0c;执行 Addressable Build 运行&#xff0c;加载 bundle 内的预制体 显示正常 2.Unit…

视频去重工具

视频去重工具 工具截图 下载 回复&#xff1a;“0028”&#xff0c;即可自动获取

javascrip页面交互

元素的三大系列 offset系列 offset初相识 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素&#xff0c;如果父级没有定位&#xff0c;则返回body element.offsetTop 返回元素相对于有定位父元素上方的偏移量 element.offsetLeft 返回元素…

win10中使用ffmpeg和MediaMTX 推流rtsp视频

在win10上测试下ffmpeg推流rtsp视频&#xff0c;需要同时用到流媒体服务器MediaMTX 。ffmpeg推流到流媒体服务器MediaMTX &#xff0c;其他客户端从流媒体服务器拉流。 步骤如下&#xff1a; 1 下载MediaMTX github: Release v1.9.3 bluenviron/mediamtx GitHub​​​​​…

el-select 和el-tree二次封装

前言 本文章是本人在开发过程中&#xff0c;遇到使用树形数据&#xff0c;动态单选或多选的需求&#xff0c;element中没有这种组件&#xff0c;故自己封装一个&#xff0c;欢迎多多指教 开发环境&#xff1a;element-UI、vue2 组件效果 单选 多选 组件引用 <treeselec…

STM32-- keil常见报错与解决办法

调试问题 1. keil在线调试需要点击好几次运行才可以运行&#xff0c;要是直接下载程序直接就不运行。 解决&#xff1a;target里面的use microlib要勾选&#xff0c;因为使用了printf。 keil在线调试STM32&#xff0c;点三次运行才能跑到main的问题解决。 keil在线调试STM32…

RNN简单理解;为什么出现Transformer:传统RNN的问题;Attention(注意力机制)和Self-Attention(自注意力机制)区别;

目录 RNN简单理解 RNN n to n Transformer N to M LSTM 为什么出现Transformer:传统RNN的问题 信息丢失的后果 Rnn是顺序执行的效率不高:顺序执行 Attention(注意力机制)和Self-Attention(自注意力机制)区别 一、计算对象不同 二、应用场景不同 三、功能差异…

51c深度学习~合集8

我自己的原文哦~ https://blog.51cto.com/whaosoft/12491632 #patchmix 近期中南大学的几位研究者做了一项对比学习方面的工作——「Inter-Instance Similarity Modeling for Contrastive Learning」&#xff0c;主要用于解决现有对比学习方法在训练过程中忽略样本间相似关系…