十年匠心定制 · 商业建站与技术教学双线并行 咨询热线:400-886-1026 service@lmnt.cn
ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

js中用到的日期对象总结与实战

js中用到的日期对象总结与实战 前言做业务开发表单时间、订单时间、倒计时、优惠券有效期、消息是否同一天到处都要和Date日期对象打交道。核心概念时间戳毫秒数数字做时间对比最靠谱不受时区、格式影响Date 对象专门处理日期时间new Date()实例化格式化原生没有现成yyyy‑MM‑dd HH:mm:ss方法需要自己封装函数补 0一、获取当前时间的几种方式1. 创建 Date 实例对象// 获取当前系统时间对象 let now new Date()2. 获取 13 位毫秒时间戳重点业务最常用三种等价写法拿到毫秒时间戳// 方式1 let t1 Date.now() // 方式2 let t2 new Date().getTime() // 方式3 简写把Date对象转数字 let t3 new Date()小知识点除以 1000 得到秒级时间戳。3. 浏览器本地格式化字符串不推荐用于业务判断new Date().toLocaleDateString() // 本地日期 2026/8/20 new Date().toLocaleTimeString() // 本地时间 15:30:22 new Date().toLocaleString() // 完整本地时间⚠️坑toLocaleXXX输出格式跟随浏览器地区不同电脑输出格式不一样只适合页面展示千万不要拿来做时间比较、接口传参。二、时间格式化封装高频复制工具函数原生 JS 没有直接输出yyyy‑MM‑dd HH:mm:ssAPI我们手动封装用padStart(2,0)自动给月、日、时、分、秒补 0。①完整时间yyyy‑MM‑dd HH:mm:ss/** * param {number} timestamp 毫秒时间戳 * returns {string} 2026‑08‑20 14:22:10 */ function format_full_datetime(timestamp) { const date new Date(timestamp) const y date.getFullYear() const m String(date.getMonth() 1).padStart(2, 0) const day String(date.getDate()).padStart(2, 0) const h String(date.getHours()).padStart(2, 0) const mi String(date.getMinutes()).padStart(2, 0) const s String(date.getSeconds()).padStart(2, 0) return ${y}-${m}-${day} ${h}:${mi}:${s} }⚠️注意getMonth()月份返回 0‑11必须 10 代表 1 月。②只输出年月日yyyy‑MM‑ddfunction format_only_date(timestamp) { const date new Date(timestamp) const y date.getFullYear() const m String(date.getMonth() 1).padStart(2, 0) const day String(date.getDate()).padStart(2, 0) return ${y}-${m}-${day} }使用小技巧已经拿到完整时间字符串想要截取年月日直接用slice(0,10)let dayStr format_full_datetime(Date.now()).slice(0,10)三、时间字符串 ↔ 时间戳互相转换1. 时间字符串 → 毫秒时间戳function get_ms_from_date_str(date_str) { return new Date(date_str).getTime() } //示例 const order_time_str 2026-08-15 09:30:00; let stamp get_ms_from_date_str(order_time_str)踩坑提醒new Date(2026‑08‑15)不带时分秒部分浏览器会按 UTC0 时区解析时间会差 8 小时。 稳妥写法补全时分秒new Date(2026‑08‑15 00:00:00)2. 时间戳 → 时间字符串直接调用上面封装的format_full_datetime(timestamp)。四、日期时间比较两种思路优先拿时间戳数字对比 直接运算兼容性最好不会踩字符串格式、时区坑。案例 1判断两个时间戳是否是同一天思路两个时间戳全部格式化为yyyy‑MM‑dd字符串再做全等对比function is_same_day(ms_a, ms_b) { let d1 format_full_datetime(ms_a).slice(0, 10) let d2 format_full_datetime(ms_b).slice(0, 10) return d1 d2 }案例 2判断当前时间是否在【开始结束】时间区间优惠券有效期把开始、结束时间字符串全部转为时间戳再做数字判断/** * param {number} check_timestamp 需要校验的毫秒时间戳 * param {string} start_str 开始日期字符串 * param {string} end_str 结束日期字符串 * returns {boolean} */ function is_in_time_range(check_timestamp, start_str, end_str) { let start new Date(start_str).getTime() let end new Date(end_str).getTime() return check_timestamp start check_timestamp end }案例 3计算倒计时剩余小时、分钟活动倒计时两个时间戳相减得到差值毫秒数再换算小时、分钟function calc_remain_time(end_date_str) { let now new Date() let end new Date(end_date_str).getTime() if (now end) { return 活动已结束 } let diff end - now //毫秒转小时 let remain_h Math.floor(diff / 1000 / 60 / 60) //剩余分钟 let remain_m Math.floor(diff / 1000 / 60 % 60) return 活动剩余${remain_h}小时 ${remain_m}分钟 }五、开发高频坑总结getMonth()从 0 开始计数一定要 1很多人月份显示 0、12 就是这个 bug。padStart(2,0)补 0保证月、日、时、分、秒永远 2 位08而不是8。toLocaleDateString不要用来做业务判断不同浏览器输出格式不一样。不带时分秒的日期字符串2026‑08‑20部分浏览器时区解析会差一天建议补00:00:00。时间对比优先用时间戳数字不要直接拿字符串比较只有格式完全一致的yyyy‑MM‑dd字符串才可以对比。时间戳是 13 位毫秒后端有时候返回 10 位秒级记得*1000转毫秒再给new Date()使用。总结日常开发 Date 三件套拿时间戳数字用来做时间运算、对比最稳。封装格式化函数补 0 输出标准yyyy‑MM‑dd HH:mm:ss用于页面展示。字符串和时间戳互相转换注意时区解析坑。
返回列表