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

news2024/11/16 12:55:59

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>

最终效果

5741beb57d254a16b94618550e895c2f.png

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/958013.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

photoshop,ps自带“不规则图形”在哪

下拉箭头&#xff08;2步&#xff09;后有个“齿轮”&#xff0c;点击齿轮&#xff0c;列表里有“全部”。

大数据HBase学习圣经:一本书实现HBase学习自由

学习目标&#xff1a;三栖合一架构师 本文是《大数据HBase学习圣经》 V1版本&#xff0c;是 《尼恩 大数据 面试宝典》姊妹篇。 这里特别说明一下&#xff1a;《尼恩 大数据 面试宝典》5个专题 PDF 自首次发布以来&#xff0c; 已经汇集了 好几百题&#xff0c;大量的大厂面试…

Springboot 接口方式硬通知实现ConfigurationProperties 、@Value 动态刷新

前言 看到这个文章标题&#xff0c;也许有的看官就觉得很多余&#xff0c; 因为Nacos 可以设置 NacosValue(value "${XXX}",autoRefreshed true) 实现动态刷新&#xff1b; 又因为cloud config的RefreshScope 实现动态刷新&#xff1b; 还有阿波罗...等 这…

MAVEN利器:一文带你了解MAVEN中的依赖管理

前言&#xff1a; 强大的构建工具——Maven。作为Java生态系统中的重要组成部分&#xff0c;Maven为开发人员提供了一种简单而高效的方式来构建、管理和发布Java项目。无论是小型项目还是大型企业级应用&#xff0c;Maven都能帮助开发人员轻松处理依赖管理、编译、测试和部署等…

iOS 使用coreData存贮页面的模型数据中的字典

我们使用coreData时候&#xff0c;会遇到较为复杂的数据类型的存贮&#xff0c;例如&#xff0c;我们要存一个模型&#xff0c;但是一个模型里面有个字典&#xff0c;这时候&#xff0c;我们该如何存贮呢 如图所示&#xff0c;一个对象中含有一个字典 我们实现一个公共的方法…

无涯教程-Flutter - 安装步骤

本章将指导您详细在本地计算机上安装Flutter。 在Windows中安装 在本节中&#xff0c;让无涯教程看看如何在Windows系统中安装 Flutter SDK 及其要求。 第1步 - 转到URL,https: //flutter.dev/docs/get-started/install/windows并下载最新的Flutter SDK。 第2步 - 将zip归档…

(leetcode1761一个图中连通三元组的最小度数,暴力+剪枝)-------------------Java实现

&#xff08;leetcode1761一个图中连通三元组的最小度数&#xff0c;暴力剪枝&#xff09;-------------------Java实现 题目表述 给你一个无向图&#xff0c;整数 n 表示图中节点的数目&#xff0c;edges 数组表示图中的边&#xff0c;其中 edges[i] [ui, vi] &#xff0c;…

电脑锁屏怎么设置?这5个方法都管用!

“我的电脑好像没有锁屏&#xff0c;就算我很久没用电脑也不会息屏。这是为什么呢&#xff1f;有什么方法可以为电脑设置锁屏吗&#xff1f;” 电脑锁屏是保护隐私和安全的重要手段。如果我们希望在不使用电脑时电脑自动进行锁屏&#xff0c;是可以手动设置的。那么&#xff0c…

EXPLAIN的用法

一、语法 EXPLAIN SQL语句二、各字段解释 1、table ● 单表&#xff1a;显示这一行的数据是关于哪张表的。 ● 多表关联&#xff1a;t1为驱动表&#xff0c;t2为被驱动表。 注意&#xff1a; 内连接时&#xff0c;MySQL性能优化器会自动判断哪个表是驱动表&#xff0c;哪个表…

什么是HTTPS协议?与HTTP协议区别?

一、协议科普 HTTP协议&#xff08;超文本传输协议&#xff09;是一种用于在计算机网络上传输超文本的应用层协议。它是一种客户端-服务器协议&#xff0c;允许客户端通过Web浏览器等方式向服务器发送请求&#xff0c;服务器则返回响应。HTTP协议是构建万维网&#xff08;WWW&…

使用pip命令安装库,装到其他环境中的问题。

问题描述&#xff1a;我们在pycharm中创建了新的虚拟环境&#xff0c;但是在其终端使用Pip命令安装库时&#xff0c;发现库却安装到了其他conda创建的环境中。图示安装gym库&#xff0c;刚开始安装到了其他地方&#xff0c;第二次正确安装。 原因分析&#xff1a;安装库时&…

USB fastboot

1 Samsung fastboot flashing unlock 2 bootloader增加解锁密码 diff --git a/app/aboot/aboot.c b/app/aboot/aboot.c index e4d46e4..1b4b450 100755 --- a/app/aboot/aboot.c b/app/aboot/aboot.c -2613,6 2613,20 void cmd_oem_unlock(const char *arg, void *data,…

[ES]mac安装es、kibana、ik分词器

一、安装es和kibana 1、创建一个网络&#xff0c;网络内的框架(eskibana)互联 docker network create es-net 2、下载es和kibana docker pull elasticsearch:7.12.1 docker pull kibana:7.12.1 3、运行docker命令部署单点eskibana&#xff08;用来操作es&#xff09; doc…

分布式搜索引擎

1 DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL&#xff08;Domain Specific Language&#xff09;来定义查询。常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数据&#xff0c;一…

开启智能时代:深度解析智能文档分析技术的前沿与应用

开启智能时代&#xff1a;深度解析智能文档分析技术的前沿与应用 本章主要介绍文档分析技术的理论知识&#xff0c;包括背景介绍、算法分类和对应思路。通过本文学习&#xff0c;你可以掌握&#xff1a;1. 版面分析的分类和典型思想 2. 表格识别的分类和典型思想 3. 信息提取的…

C语言函数编程指南:实现模块化和可维护的代码

函数 1. 前言2. 函数是什么3. C语言中函数的分类3.1 库函数3.2 自定义函数 4. 函数的参数4.1 实际参数&#xff08;实参&#xff09;4.2 形式参数&#xff08;形参&#xff09; 5. 函数的调用5.1 传值调用5.2 传址调用 6. 阶段练习6.1 打印100~200之间的素数6.2 打印1000到2000…

WEBGL(2):绘制单个点

代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…

基于微信小程序的社交用户交流系统

本文从管理员、用户的功能要求出发&#xff0c;微信小程序的社交系统中的功能模块主要是实现首页、个人中心、用户管理、用户技能管理、技能分类管理、交流论坛、系统管理。经过认真细致的研究&#xff0c;精心准备和规划&#xff0c;最后测试成功&#xff0c;系统可以正常使用…

RFID技术:工业稳定的关键

RFID 技术在工业领域的应用让生产和运营更加稳定高效。这种无线通信技术可以通过无线电波实现信息的读取和写入&#xff0c;使得数据采集、存储和传输变得更加便捷。在工业生产中&#xff0c;RFID 的应用可以帮助企业提高生产效率、降低成本、提高产品质量&#xff0c;从而让工…

Mike11;Mike21深度技能解析

数学模型在水环境评价、防洪评价和排污口论证等领域中有重要作用&#xff0c;随着人类活动的不断增加和环境问题的日益突出&#xff0c;对水资源和水环境的保护与管理变得至关重要。为了更好地理解和应对这些挑战&#xff0c;数学模型成为一种强大的工具&#xff0c;能够提供量…