织梦网站install,中国响应式网站有哪些,网站运营前期中期后期,氪星人 wordpress#x1f9d1;#x1f393; 个人主页#xff1a;《爱蹦跶的大A阿》
#x1f525;当前正在更新专栏#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》
✨ 前言 日期和时间在应用开发中是非常常用的功能。本文将全面介绍JavaScript中处理日期和时间的方… 个人主页《爱蹦跶的大A阿》
当前正在更新专栏《VUE》 、《JavaScript保姆级教程》、《krpano》
✨ 前言 日期和时间在应用开发中是非常常用的功能。本文将全面介绍JavaScript中处理日期和时间的方法,让你可以快速上手各种日期操作。
本文将讲解:
创建和解析Date对象的各种方法抽取日期的指定部分如年、月、日等格式化日期显示不同格式字符串通过偏移进行日期时间的计算时间戳与Date的相互转化处理时区和国际时间表示Moment.js的便捷用法如何实现一个日期选择器
准备掌握JavaScript的日期和时间处理技能了吗?让我们开始吧!
第一节:Date对象 Date对象在JavaScript中用于表示日期和时间,它是一个构造函数。创建Date对象有以下几种方式:
不传参创建当前日期和时间的Date对象: let now new Date(); 传递表示日期时间的毫秒数创建Date对象: let date new Date(1674192000000); // 指定毫秒数 传递日期时间参数创建Date对象: new Date(2023, 0, 1); // 2023-01-01
new Date(2023, 0, 1, 12, 0, 0); // 2023-01-01 12:00:00 解析字符串创建Date对象: new Date(2023-01-01); Date对象具有丰富的方法可以获取日期各个部分,进行格式化和计算。理解Date对象的创建方式,是学习日期处理的第一步。
第二节:获取时间 可以通过下列Date对象的方法获取到日期时间的细节部分:
getFullYear() 获取四位年份getMonth() 获取月份(0-11)getDate() 获取当前月中的天数(1-31)getDay() 获取星期几(0-6)getHours() 获取小时(0-23)getMinutes() 获取分钟(0-59)getSeconds() 获取秒(0-59)getMilliseconds() 获取毫秒(0-999)getTime() 获取总的毫秒数
例如获取当前时间:
let now new Date();now.getFullYear(); // 2023
now.getMonth(); // 0
now.getDate(); // 15
now.getDay(); // 1 表示星期二 getMonth()需要注意月份范围是0-11,实际月份要加1。这些方法可以获取Date对象表示时间的各个组成部分。
第三节:格式化日期 获取到Date对象时间信息后,可以进行格式化后输出需要的日期字符串:
toISOString() 输出标准ISO格式 let now new Date();
now.toISOString(); // 2023-01-15T13:49:35.029Z toUTCString()/toLocaleString() 输出UTC或本地格式自定义格式化 let date new Date();let str date.getFullYear() - (date.getMonth() 1) - date.getDate(); // 2023-01-15
第四节:日期计算 可以通过给Date对象的毫秒数做算术运算来计算新的日期:
let date new Date(2023, 0, 1); // 2023-01-01let newDate new Date(date.getTime() 5 * 24 * 60 * 60 * 1000);
// 5天后的日期 Date对象也提供了许多方法可以快捷计算新日期:
setDate(d) 设置日期setMonth(m) 设置月份setFullYear(y) 设置年份setHours(h) 设置小时setMinutes(m) 设置分钟setSeconds(s) 设置秒
例如增加一个月:
let date new Date(2023, 0, 1); date.setMonth(date.getMonth() 1); 这些方法可以对Date对象进行日期时间的运算和偏移得到新日期。
第五节:时间戳转换 时间戳是从1970年1月1日到当前日期的总毫秒数。 Date对象与时间戳的相互转换:
// Date - 时间戳
let date new Date();
let ts date.getTime();// 时间戳 - Date
let date new Date(1673875600000); 时间戳是一个整数,可以更方便地进行存储和传输,并通过Date对象解析为本地时间。 接下来我将介绍日期的国际化和时区处理,以及一些实用的第三方库,欢迎提出您的意见!
第六节:国际时间和时区 Date对象默认创建的时间是当前环境的本地时间。我们可以转换为UTC时间:
let date new Date();
date.toUTCString(); //转换为UTC时间 也可以显示特定时区的时间:
date.toLocaleString(zh-CN, {timeZone: Asia/Shanghai}); // 中国时区时间 处理时间对象时,需要注意时区问题,显示给用户的时间信息是否正确。 Date对象的时间原点 Date对象中的时间是以1970年1月1日00:00:00作为时间原点的,这个时间被称为Unix Epoch时间。Date对象中存储的毫秒数是从时间原点开始算起的。 这就是getTime()返回的毫秒数,以及创建Date对象时传入的毫秒数的参数代表的意义。
本地时间与UTC时间 Date对象默认首先创建表示当前环境的本地时间。我们可以通过转换显示UTC时间:
let d new Date();
d.toUTCString(); UTC时间与本地时间可能存在时差,需要注意。在网络传输时推荐使用标准的UTC时间。
夏令时的影响 有一些地区实行夏令时,这会导致本地时间在夏令时期间会增加1个小时。 这可能会对表示当地时间造成影响,需要注意正确显示时间。
不同地区显示不同时区时间 展示给用户查看的时间信息,需要显示正确的时区时间,而不是固定的UTC时间:
d.toLocaleString(zh-CN, {timeZone: Asia/Shanghai}); 根据用户所在地区动态显示本地格式和时区时间非常重要。
第七节:第三方库Moment.js Moment.js是一个轻量的日期处理库,提供了更便捷的日期格式化和操作方法:
let now moment();now.format(YYYY-MM-DD); // 格式化
now.add(1, d); // 增加1天 Moment.js可以快速处理复杂的日期格式,计算跨度等操作。
第八节:日期选择控件 可以利用Date对象构建日期选择器:
生成年、月、日菜单供选择计算选择的日期结果高亮显示当前选择日期 合理运用Date对象的方法,可以实现功能强大的日期选择器,提高用户体验。
生成日期选择菜单 可以通过获取当前年月日信息,调用setFullYear()、setMonth()、setDate()方法生成年、月、日的选择菜单。 增加前后导航按钮可以切换年月。
选择日期时实时更新 可以给菜单添加onchange事件,当用户选择年、月、日时,实时构建选中的日期对象,并更新显示。
高亮今天日期 可以获取今天的日期,比较选择框中的日期,如果相同就添加特殊样式来高亮显示今天。
禁用不可选择日期 可以定一些规则,例如只能选择今天之后的日期,灰显过去的日期,通过启用disable属性来禁止选择。
国际化 可以根据不同语言和地区显示不同的日期文本,如月份名称等。
浮层显示 可以用浮动div将日期选择器渲染成一个浮层,点击输入框时弹出。
代码示例 div iddate-pickerselect idyear/selectselect idmonth/selectselect idday/selectdiv idselected-date/div/div
// 生成年份选择菜单
const yearSelect document.getElementById(year);for (let i 1990; i 2030; i) {let opt document.createElement(option);opt.value i;opt.innerHTML i;yearSelect.appendChild(opt);
}// 生成月份选择菜单
const monthSelect document.getElementById(month);for (let i 1; i 12; i) {let opt document.createElement(option);opt.value i;opt.innerHTML i;monthSelect.appendChild(opt);
} // 选择日期时更新显示
function updateDate() {let year yearSelect.value;let month monthSelect.value;let day daySelect.value;let displayDate year - month - day;selectedDate.innerHTML displayDate;
}yearSelect.onchange monthSelect.onchange updateDate; 以上演示了基本的日期选择实现,还可以继续优化交互、样式等。 ✨ 结语 在这个内容丰富的指南中,我们全面介绍了JavaScript中处理日期和时间的各种方法 - 从Date对象的创建、各种获取时间方法、格式化显示、进行计算以及与时间戳相互转换等,涵盖了日期时间处理的方方面面。 同时,我们也提到了一些需要注意的重点,比如本地时间与UTC时间、时区和国际时间的处理等。最后,还给出了一些额外的资源,如Moment.js这样优秀的第三方库。 我尽力用通俗易懂的语言和示例代码做了全面的解读,希望这篇指南可以成为JavaScript日期和时间处理的参考指南,能够帮助大家快速上手。 如果您在学习和使用过程中,还有任何疑问或建议,欢迎在评论区与我互动讨论。时间处理是开发中必不可少的功能,希望我们可以共同进步。感谢您的观看!
