当前位置:首页 > JavaScript

js实现时间转换

2026-04-04 19:20:51JavaScript

时间戳转日期字符串

使用 Date 对象和内置方法转换时间戳为可读格式:

const timestamp = 1625097600000;
const date = new Date(timestamp);
const formattedDate = date.toLocaleString(); // 本地化日期时间格式
// 或自定义格式
const customFormat = `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2,'0')}-${date.getDate().toString().padStart(2,'0')}`;

日期字符串转时间戳

通过 Date.parse() 或构造函数获取时间戳:

const dateStr = '2023-06-30';
const timestamp1 = Date.parse(dateStr);
const timestamp2 = new Date(dateStr).getTime();

相对时间计算

计算时间差并转换为人类可读格式:

function formatRelativeTime(timestamp) {
  const now = Date.now();
  const diff = now - timestamp;
  const minute = 60 * 1000;
  const hour = minute * 60;

  if (diff < minute) return '刚刚';
  if (diff < hour) return `${Math.floor(diff/minute)}分钟前`;
  return `${Math.floor(diff/hour)}小时前`;
}

时区转换

使用 toLocaleString 的选项参数处理时区:

const date = new Date();
const options = {
  timeZone: 'Asia/Shanghai',
  year: 'numeric',
  month: '2-digit',
  day: '2-digit'
};
const chinaTime = date.toLocaleString('zh-CN', options);

第三方库推荐

对于复杂的时间操作,推荐使用以下库:

  • moment.js(已停止维护但广泛使用)
  • date-fns(模块化轻量方案)
  • day.js(moment.js的现代替代品)
// day.js示例
import dayjs from 'dayjs';
dayjs().format('YYYY-MM-DD HH:mm:ss');
dayjs(1625097600000).fromNow();

性能优化技巧

处理大量时间转换时:

js实现时间转换

  • 避免在循环中重复创建 Date 对象
  • 对频繁使用的格式进行缓存
  • 使用整数运算代替字符串操作

标签: 时间js
分享给朋友:

相关文章

js实现分页

js实现分页

分页的基本实现思路 在JavaScript中实现分页功能通常需要结合前端和后端逻辑。前端负责渲染分页控件和处理用户交互,后端负责提供分页数据。 前端分页实现 纯前端分页适用于数据量较小的情况,可以直…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 const…