前端将UTC时间格式转化为本地时间格式~~uniapp写法

简介: 前端将UTC时间格式转化为本地时间格式~~uniapp写法

UTC时间格式是什么

首先我们先简单的了解一下:UTC时间(协调世界时,Coordinated Universal Time)使用24小时制,以小时、分钟、秒和毫秒来表示时间

HH:mm:ss.SSS
  • HH 表示小时,取值范围为00到23。
  • mm 表示分钟,取值范围为00到59。
  • ss 表示秒,取值范围为00到59。
  • SSS 表示毫秒,取值范围为000到999。

需要注意的是,UTC时间不考虑夏令时或时区的影响,因此它是一种标准的时间表示方法,不会受到地理位置的变化而改变。

如何转化呢?

我们先随便准备一组数据,能用就行哈

假设下方的数据就是我们冲接口中获取到的

list: [{
            "id": 20,
            "goods_id": 20,
            "task_id": null,
            "deduct_num": 120,
            "integral_num": null,
            "type": 2,
            "created_at": "2023-08-31T02:56:02.000000Z"
          },
          {
            "id": 19,
            "goods_id": 29,
            "task_id": null,
            "deduct_num": 60,
            "integral_num": null,
            "type": 2,
            "created_at": "2023-08-31T02:55:44.000000Z"
          },
          {
            "id": 18,
            "goods_id": 12,
            "task_id": null,
            "deduct_num": 60,
            "integral_num": null,
            "type": 2,
            "created_at": "2023-08-31T02:41:32.000000Z"
          },
          {
            "id": 17,
            "goods_id": 9,
            "task_id": null,
            "deduct_num": 220,
            "integral_num": null,
            "type": 2,
            "created_at": "2023-08-31T02:23:40.000000Z"
          },
          {
            "id": 16,
            "goods_id": 25,
            "task_id": null,
            "deduct_num": 40,
            "integral_num": null,
            "type": 2,
            "created_at": "2023-08-31T02:18:09.000000Z"
          },
          {
            "id": 15,
            "goods_id": 30,
            "task_id": null,
            "deduct_num": 160,
            "integral_num": null,
            "type": 2,
            "created_at": "2023-08-31T01:15:15.000000Z"
          }
        ],

使用v-for指令遍历list数组,然后调用convertUTCtoLocal方法将每个对象的created_at字段从UTC时间格式转换为本地时间格式。最终,显示本地时间在界面上。

记得在实际应用中,确保你的时间数据以正确的格式和类型存在,并且适当地处理可能的错误情况

convertUTCtoLocal(utcTime) {
      const utcDate = new Date(utcTime);
      const localDate = new Date(utcDate.getTime() + utcDate.getTimezoneOffset() * 60000);
      return localDate.toLocaleString();
    }

页面渲染部分

<ul>
      <li v-for="(item, index) in list" :key="index">
        <p>ID: {{ item.id }}</p>
        <p>本地时间: {{ convertUTCtoLocal(item.created_at) }}</p>
      </li>
    </ul>

最终效果

目录
相关文章
|
1月前
|
前端开发 小程序 Java
uniapp上传图片 前端以及java后端代码实现
uniapp上传图片 前端以及java后端代码实现
134 0
|
1月前
|
Web App开发 JavaScript 前端开发
网页VUE纯前端在线预览编辑Office,支持doc/docx、xls/xlsx、ppt/pptx、pdf等格式
随着互联网技术的不断发展,越来越多的企业开始采用在线办公模式,微软Office Word 是最好用的文档编辑工具,然而doc、docx、xls、xlsx、ppt、pptx等格式的Office文档是无法直接在浏览器中直接打开的,如果可以实现Web在线预览编辑OffIce,肯定会还带来了更高效、便捷的办公体验,为我们的工作带来了更多可能性。
781 0
|
1月前
|
前端开发 JavaScript Android开发
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
【5月更文挑战第16天】Uniapp是一个基于Vue.js的跨平台前端框架,能将代码编译成iOS、Android、H5等多个平台应用,简化跨平台开发。相比React和Angular,Uniapp更适合移动应用,减少平台适配工作。Vue.js的组件化和灵活性在Uniapp中得到延伸,增加了移动端特性。而Flutter性能优越,但学习成本高。开发者应根据项目需求和技术栈选择合适的框架。
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
|
24天前
|
JavaScript 前端开发 Java
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线开放课程的Web前端的详细设计和实现(源码+lw+部署文档+讲解等)
|
1月前
|
前端开发
基于jeecg前端实现从表ERP格式选择
基于jeecg前端实现从表ERP格式选择
14 1
|
9月前
|
移动开发 JavaScript 前端开发
前端(九)——探索微信小程序、Vue、React和Uniapp生命周期(下)
前端(九)——探索微信小程序、Vue、React和Uniapp生命周期(下)
103 0
|
9月前
|
JavaScript 小程序 前端开发
前端(九)——探索微信小程序、Vue、React和Uniapp生命周期(上)
前端(九)——探索微信小程序、Vue、React和Uniapp生命周期(上)
132 0
|
1月前
|
前端开发 JavaScript Unix
前端常用的时间格式配置格式
前端常用的时间格式配置格式
|
1月前
|
前端开发 JavaScript
前端用原生js编辑文件内容→创建生成文件(格式可以自定义)→下载文件
前端用原生js编辑文件内容→创建生成文件(格式可以自定义)→下载文件
|
8月前
|
前端开发
【前端】从markdown格式文本中提取图片链接
【前端】从markdown格式文本中提取图片链接
85 0