JavaScript 代码片段——计算时间距离

本文介绍了一个JavaScript函数,用于计算给定时间字符串与当前时间之间的相对距离,并以易读的格式返回结果,如“XX小时前”或“刚刚”。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求:给定一个过去某个时间的时间字符串,例如 “2023-09-07 11:33:23”,返回距当前时间的距离,例如 “XX小时前”、“XX分钟前”、“刚刚”、超过一天显示原本时间。

输入:time = “2023-09-07 11:33:23”
代码:

/**
 * 计算时间距离
 */
function showFormattedTime(time: string): string {
  const now = new Date()

  const diff = now.getTime() - new Date(time).getTime()

  if (diff > 24 * 60 * 60 * 1000) {
    return time
  }

  if (diff > 60 * 60 * 1000) {
    return Math.floor(diff / (60 * 60 * 1000)) + '小时前'
  }

  if (diff > 60 * 1000) {
    return Math.floor(diff / (60 * 1000)) + '分钟前'
  }

  return '刚刚'
}

返回:“21小时前”

### 距离计算在前端开发中的重要性 在前端开发中,距离计算对于许多应用场景来说至关重要。例如,在物流配送系统中,需要计算送货员当前位置与目的地之间的直线距离;在旅游网站上,则可能要显示景点间的实际路程长度[^1]。 ### 实现方法概述 为了满足这些需求,开发者通常会采用地理信息系统(GIS)提供的服务来完成这项工作。具体而言,可以调用第三方的地图API接口来进行两点间最短路径规划或是直接获取经纬度坐标下的球面距离测量结果。这里将以腾讯地图 API 作为例子说明如何利用它所提供的工具函数轻松达成此目的。 ### 使用腾讯地图API进行距离计算的具体操作 #### 获取两个地点的经纬度信息 首先,确保已经成功引入了腾讯地图 JavaScript SDK 并初始化好 map 对象之后,可以通过 `geocoder` 类型对象查询任意地址对应的经度和纬度值: ```javascript // 创建 geocoder 实例 var myGeocoder = new TMap.service.Geocoder({ // 设置参数 }); myGeocoder.getAddress({location: {lat: latitude, lng: longitude}}, function (status, result) { console.log(result); }) ``` #### 计算两组经纬度之间的大圆弧线距离 接着就是核心部分——根据所得到的位置数据求解它们彼此相隔多远。此时可借助于 Haversine 公式 或者 Vincenty's formulae 来近似估算地球表面上任意两点沿表面连线的距离。幸运的是,腾讯地图也提供了便捷的方式来做这件事: ```javascript function calculateDistance(lat1, lon1, lat2, lon2){ var pointA = new TMap.LatLng(lat1,lon1); var pointB = new TMap.LatLng(lat2,lon2); return Math.round(TMap.geometry.spherical.computeDistanceBetween(pointA ,pointB)); } console.log(calculateDistance(39.984722,116.304167,31.229152,121.479723)); // 输出单位为米 ``` 上述代码片段展示了怎样定义一个名为 `calculateDistance()` 的辅助函数接收四个浮点数类型的输入参数代表起点和终点各自的维度及经度数值,并返回二者间距的结果(以整数形式表示)。最后打印出来的即是从北京天安门广场到上海外滩这段行程大约有多少公里长。 ### 组件化实现方案 除了直接编写逻辑处理程序之外,还可以考虑将此类功能封装成易于重用的小部件以便更好地适应现代 Web 应用架构的要求。比如基于 Vue 和 uni-app 构建的地图定位与距离测算插件就很好地体现了这一点。这种方式有助于简化项目结构并增强代码可读性和移植性[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值