vue3毫秒级时间戳转换

Unix 时间戳是从1970年1月1日(UTC/GMT的午夜)开始所经过的秒数,不考虑闰秒。

以下2个方法源自于时间工具包:time utils

效果展示:在线时间戳转换工具

时间转时间戳

/**
 * 将某个时间转化成时间戳
 * 时间格式:2019-05-20 00:00:00 或 2019年5月1日 00:00:00
 * 返回值:1556640000000,13位时间戳
 */
function Jh_convertTimeStamp(time: string): number {
  // 用正则主要是把“2019-05-20 00:00:00”转换成“2019/05/20 00:00:00”兼容ios
  let newTime = time.replace(/-|\./g, '/')
  // console.log(newTime);
  // newTime = newTime.replace(/\./g, "-");
  newTime = newTime.replace(//g, '/')
  newTime = newTime.replace(//g, '/')
  newTime = newTime.replace(//g, '')
  if (newTime.length === 4) {
    newTime = newTime + '/01/01 00:00:00'
  }
  if (newTime.length === 7) {
    newTime = newTime + '/01 00:00:00'
  }
  if (newTime.length === 10) {
    newTime = newTime + ' 00:00:00'
  }
  if (newTime.length === 16) {
    newTime = newTime + ':00'
  }
  return Date.parse(newTime)
}

使用示例

let res = Jh_convertTimeStamp('2024-05-31 14:16:39')

时间戳转换时间

/**
 * 将某个时间戳转化成 指定格式时间
 * @param {date} time 时间  new Date().getTime()
 * @param {string} cFormat {y}-{m}-{d} {h}:{i}:{s} {w}
 */
function Jh_timeStampToTime(time: string | number | Date, cFormat: string): string {
  if (arguments.length === 0) {
    return ''
  }
  const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
  let date: Date
  if (typeof time === 'object') {
    date = time as Date
  } else {
    if (('' + time).length === 10) time = parseInt(time as string) * 1000
    date = new Date(time)
  }

  const formatObj: any = {
    y: date.getFullYear(),
    m: date.getMonth() + 1,
    d: date.getDate(),
    h: date.getHours(),
    i: date.getMinutes(),
    s: date.getSeconds(),
    w: date.getDay()
  }
  const time_str = format.replace(/{(y|m|d|h|i|s|w)+}/g, (result, key) => {
    let value = formatObj[key]
    if (key === 'w') {
      return ['日', '一', '二', '三', '四', '五', '六'][value]
    }
    if (result.length > 0 && value < 10) {
      value = '0' + value
    }
    return value || 0
  })
  return time_str
}

使用示例:

let res = Jh_timeStampToTime(1717136199178, '{y}-{m}-{d} {h}:{i}:{s}')

Tools-Web是一个免费开源工具站;只需简单几步,即可快速搭建属于自己的综合工具站,支持docker一键部署。

### Vue3 中将时间戳转换为可读日期的 JavaScript 方法 在 Vue3 项目中,可以创建一个通用的时间戳日期的方法,并将其封装到混合、插件或组合式 API 的工具函数中以便于重用。下面展示一种通过定义辅助函数并利用 `Intl.DateTimeFormat` 对象来进行格式化的方式。 #### 使用自定义方法进行时间戳转换 为了处理不同长度的时间戳(通常是10位秒级或13毫秒级),先判断传入参数的形式再做相应调整: ```javascript function formatTimestamp(timestamp) { // 判断是否为有效数值型时间戳 if (isNaN(Number(timestamp))) throw new Error(&#39;Invalid timestamp&#39;); const ts = Number(timestamp); // 如果是10位数,则乘以1000变为毫秒单位;否则假定已经是毫秒级别 const adjustedTs = String(ts).length === 10 ? ts * 1000 : ts; // 创建新的Date实例用于后续操作 const dateObj = new Date(adjustedTs); // 定义所需的语言环境和地区设置 const localeOptions = { year: &#39;numeric&#39;, month: &#39;2-digit&#39;, day: &#39;2-digit&#39;, hour: &#39;2-digit&#39;, minute:&#39;2-digit&#39;, second:&#39;2-digit&#39; }; // 返回格式化后的字符串表示形式 return new Intl.DateTimeFormat(&#39;zh-CN&#39;, localeOptions).format(dateObj)[^1]; } ``` 此代码片段展示了如何安全地接收各种可能的时间戳输入,并返回符合中国地区习惯的日历表达方式。注意这里选择了中文语言环境 `&#39;zh-CN&#39;` 和特定选项集来控制输出样式[^3]。 对于希望在整个应用程序范围内使用的场景,在项目的入口文件如 `main.js` 或者专门建立的帮助类里注册该方法是一个不错的选择。这样做的好处是可以让任何组件都能方便调用而无需重复编写相同的逻辑。 此外,也可以考虑把这一过程集成至计算属性内,从而允许视图层自动响应数据变化触发更新显示效果[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值