文章目录
- 概要
- 一、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
- 安装和引入
- 安装:
- 如果使用npm进行项目管理,可以在项目目录下的终端中运行
npm install moment
来安装moment.js
库。
- 如果使用npm进行项目管理,可以在项目目录下的终端中运行
- 引入:
- 在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模块的环境下)。
- 在HTML文件中,可以通过
- 安装:
- 日期格式化
- 基本格式:
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
的内容。
- 基本格式:
- 日期操作
- 增减时间单位:
- 可以方便地对日期进行增减操作。例如,
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
,还可以对years
、months
、hours
、minutes
、seconds
等时间单位进行操作。
- 可以方便地对日期进行增减操作。例如,
- 设置日期和时间:
set()
方法可以用于设置日期和时间的具体值。例如:
let customDate = moment(); customDate.set('year', 2025).set('month', 0).set('date', 1); console.log(customDate.format('YYYY - MM - DD'));
- 这段代码将日期设置为2025年1月1日,并输出格式化后的日期。
- 增减时间单位:
- 日期比较
- 比较两个日期的先后顺序:
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
,还可以计算其他时间单位的差值,如years
、months
、hours
等。
- 比较两个日期的先后顺序:
- 本地化和国际化应用
- 设置语言环境:
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 常见场景应用
- 时间区间处理
- 时间段计算:
- 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('当前日期不在活动时间区间内'); }
- 时间段计算:
- 日期排序与分组
- 日期排序:
- 当有一组日期需要排序时,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
对象将包含按照月份分组后的日期数组。
- 日期排序:
- 复杂的时间计算和业务逻辑支持
- 工作时间计算:
- 在业务场景中,例如计算一个任务在工作时间(假设周一到周五,每天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小时.
时区时间说明
- 地球自转与时区时间先后顺序
- 地球自西向东自转,这就导致东边的地区会比西边的地区更早看到太阳,时间也就更早。因此,在地球上越往东的地区,时间越快。
- 时区划分与时间比较示例
- 时区是按照经度划分的,全球共划分为24个时区。以本初子午线(0°经线)为中心,向东、向西各7.5°为零时区。然后从零时区的边界分别向东、向西,每隔15°划分一个时区。
- 例如,当北京时间(东八区)是上午10点的时候,位于其东边的日本(东九区)时间是上午11点,而位于其西边的印度(东5.5区)时间约是上午7点30分。所以从时间快慢的角度来说,东边(如东北方向的日本相对于中国)的时间更快,西边(如印度相对于中国)的时间更慢。
- 特殊情况说明
- 不过,需要注意的是在计算日期变更时,存在国际日期变更线。这条线大致沿着180°经线,当从东向西越过这条线时,日期要加一天;从西向东越过这条线时,日期要减一天。这是为了避免在环球旅行等情况下出现日期混乱的问题。例如,从亚洲向东跨越太平洋到达美洲时,会经过国际日期变更线,日期会发生变化,而不是单纯按照东边时间快的原则来计算。