uni-app怎么计算两个时间差

老静酱_3225

老静酱_3225

2026-10-31

762人浏览

原创

最稳方式是用new Date()构造日期对象再算毫秒差:传时间戳或标准化字符串(如"2023/06/01"),调用Math.abs(end-start)/(10006060*24)并Math.floor取整,全端兼容;避免直接解析"2023-06-01"等短横线格式。

uni-app怎么计算两个时间差

uni-app里用new Date()算天数差最稳

直接用new Date()构造两个日期对象,再用毫秒差除以 1000 * 60 * 60 * 24 得整数天数,是 uni-app 全端兼容性最高、最不容易出错的方式。别碰字符串比对或手动拆年月日——iOS 微信小程序对"2023-06-01"这种格式解析不稳定,而new Date(2023, 5, 1)(注意月份从 0 开始)则全平台一致。

常见错误现象:new Date("2023-06-01") 在 H5 正常,在微信小程序可能返回 Invalid Date;getMonth() 忘记减 1 导致月份错位;没用Math.abs()导致负数天数。

  • 输入必须是标准格式或数字时间戳:优先传毫秒时间戳(如 1718234567000),其次用 new Date(year, monthIndex, date)
  • 字符串时间务必先标准化:把"2023-06-01"换成"2023/06/01"再传给new Date()
  • 计算后一定要Math.floor()或parseInt()取整,浮点误差会导致多出 0.9999 天
function getDaysDiff(startDate, endDate) {
  const start = typeof startDate === 'number' 
    ? new Date(startDate) 
    : new Date(startDate.replace(/-/g, '/'));
  const end = typeof endDate === 'number' 
    ? new Date(endDate) 
    : new Date(endDate.replace(/-/g, '/'));
  return Math.floor(Math.abs(end - start) / (1000 * 60 * 60 * 24));
}
// 调用示例
getDaysDiff('2026-10-20', '2026-10-30') // → 10

用moment.js的diff()要注意包体积和时区

如果你项目已引入moment.js,diff()确实写起来最简洁,但得清楚它默认按本地时区算,且在 App 和小程序里会增大包体积约 200KB。它不解决底层兼容问题,只是语法糖。

使用场景:仅限已有 moment 依赖、且对包大小不敏感的管理后台类 H5 项目;电商小程序慎用。

  • diff()单位必须显式指定,如.diff(start, 'days'),漏掉'days'会返回毫秒值
  • 传入字符串时,moment 内部仍会调用new Date(),所以同样受"2023-06-01"解析失败影响
  • 跨月/跨年计算时,diff('months')返回的是“完整月份数”,不是日历月差,比如 1 月 31 日到 2 月 28 日返回 0
const start = this.$moment('2026/10/20');
const end = this.$moment('2026/10/30');
const days = end.diff(start, 'days'); // → 10

服务端返回时间戳时,别自己转字符串再算

后端如果给的是秒级时间戳(如 expire_time: 1718234567),前端千万别先format成"2023-06-01"再传给日期函数——这多一次无谓转换,还引入时区和格式化 bug 风险。直接乘 1000 当毫秒戳用最干净。

uni-app
uni-app

uni-app 是基于 Vue 的跨端开发框架,适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

性能影响:每次 format + parse 是两次时间对象创建,低端安卓机上可感知卡顿;而expire_time * 1000 - Date.now()是纯数值运算,快一个数量级。

  • 秒级戳 → 毫秒级:统一用expire_time * 1000,别用parseInt(expire_time) * 1000(多余)
  • 别在 data 里存格式化后的字符串时间,只存原始戳,需要显示时再格式化
  • 倒计时类逻辑中,天数差应实时算:Math.max(0, Math.floor((endTime - Date.now()) / 86400000))

为什么uni-dateformat不适合算时间差

uni-dateformat是展示组件,不是计算工具。它的threshold参数只控制「何时触发简化显示」(如[60000, 3600000]表示 1 分钟内显示“刚刚”,1 小时内显示“X 分钟前”),它内部不暴露差值,也没提供diff()方法。

容易踩的坑:有人试图用来“看”是否超过一天,这是误用——它只决定文案,不返回数值,也无法用于逻辑判断(比如“超 3 天就标红”)。

  • 真正需要数值差,请回到new Date()或moment.diff()
  • uni-dateformat只该用在{{ item.create_time | formatDate }}这类纯展示场景
  • 它不处理两个时间之间的关系,只处理单个时间点相对于“现在”的语义映射

实际开发中最容易被忽略的一点:时间差计算结果要配合业务语义做校验。比如“距活动开始还有 X 天”,X 为负数时不能直接显示“-2 天”,而应转为“已开始”或“进行中”——这个判断不在日期计算层,而在业务逻辑层,但很多人把它和getDaysDiff()混在一起写,导致复用性极差。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

uni-app

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2743

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5963

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6910

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6678

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

943

5

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2215

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3502

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1176

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

4039

7

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
uni-app从入门到实战教程
uni-app从入门到实战教程

共0课时 | 0人学习

uni-app x harmony开发指南
uni-app x harmony开发指南

共0课时 | 0人学习

uni-app鸿蒙运行和发行
uni-app鸿蒙运行和发行

共0课时 | 0人学习