网站首页 > 知识剖析 正文
Date是JS中用于处理日期时间的核心对象。熟悉Date对象,可以使我们的日期处理代码写的更优雅。现在,进入正题:如何更优雅的计算时间差?
最近,接手了一套前端祖传项目,是N年前一个C#工程师写的,里面有一个计算时差函数是这么写的:
/*************************************************
* 计算时差
*/
function calculateTimeSpan(begTime)
{
var date3=new Date().getTime()-begTime.getTime() ; //时间差的毫秒数
if(date3 <0) date3 = 0 ;
//计算出小时数
var leave1=date3%(24*3600*1000) ; //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000) ; //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));
//计算相差秒数
var leave3=leave2%(60*1000); //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000);
return hours+":"+minutes+":"+seconds ;
}
上面的函数,大家能看懂吗?是不是觉得理解起来很吃力?这个函数接收一个开始日期时间,计算距离当前日期时间的时间差,最后返回一个截掉年月日,以时分秒表示的时间字符串。
虽然Date对象有一个getTime方法,但实际上,我们永远都不需要使用它。为什么呢?因为有更好的方法替代它。
获取当前时间的时间戳,除了getTime,还有如下方式:
const ms = Date.now()
const ms = +new Date()
是不是都比getTime写的更少?实际上,日期之间的算术运算并不需要手动转化为时间戳数值,JS内部会进行临时自动类型转化,将Date对象转化为时间戳再进行运算。计算时间差,我们可以直接这么写:
const timeSpan = new Date() - begTime
上面的计算时差函数,我这里有一个更简洁且易于理解的解决方案。就是根据任意年月日创建一个日期对象,此时它的时分秒都是0。然后,我们调用它的setMilliseconds方法,将时差毫秒传入,最后返回以它的时分秒表示的字符串即可。代码如下:
/**
* 计算时差
* @param {Date} beginTime
*/
const calcTimeSpan = beginTime => {
const date = new Date(2000, 1, 1)
date.setMilliseconds(Math.max(new Date() - beginTime, 0))
return `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
}
仅需3行代码,我们便实现了与上面9行代码相同的功能,而且简洁很多。大家都能看懂吧?这个方案是不是很好理解?
若大家还有不明白的地方,欢迎评论区问我。感谢阅读!
- 上一篇: 在js中常见的时间格式及其转换
- 下一篇: 如何在 JavaScript 中按日期对对象数组进行排序
猜你喜欢
- 2024-12-07 (建议收藏) | 企业中Vue.js最常用的第三方插件
- 2024-12-07 前端基础:JavaScript
- 2024-12-07 SpringBoot @JsonFormat无法接收前端传递的日期字符串
- 2024-12-07 七爪源码:如何在 JavaScript 中从日期中减去 6 个月
- 2024-12-07 如何在 JavaScript 中按日期对对象数组进行排序
- 2024-12-07 在js中常见的时间格式及其转换
- 2024-12-07 Web前端最强JavaScript Excel处理插件——exceljs
- 2024-12-07 js获取时间戳的几种方式
- 2024-12-07 Axure高保真教程:日期时间下拉列表
- 2024-12-07 JavaScript获取现在时间日期与农历
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)