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

news2024/7/4 5:08:10

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>

最终效果

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

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

相关文章

Tomcat安装及配置教程-Windows和Linux

本文主要介绍Windows版本Tomcat部署的详细步骤和列出Linux部署的简要细节命令,其中Windows从一到七,Linux用第八个标题讲述 一,安装 1,打开官网,https://tomcat.apache.org/,选择Tomcat 8.5.93版本,点击Download,根据系统版本选择压缩包 2,下载完毕,将压缩包解压,将所有文件放…

Gartner IDC:超融合回归“软件定义”本质,“全栈软件”成为厂商关键能力

近日&#xff0c;IDC 发布了《中国软件定义存储&#xff08;SDS&#xff09;及超融合存储系统&#xff08;HCI&#xff09;市场季度跟踪报告&#xff0c;2023 年第一季度》&#xff08;以下简称“跟踪报告”&#xff09;。不同于以往报告主要关注一体化超融合系统&#xff0c;这…

无涯教程-Android - DatePicker函数

Android Date Picker允许您在自定义用户界面中选择由日,月和年组成的日期。为此功能,android提供了DatePicker和DatePickerDialog组件。 在本教程中,我们将通过DatePickerDialog演示日期选择器的用法, DatePickerDialog是一个包含DatePicker的简单对话框。 为了显示DatePicker…

15、监测数据采集物联网应用开发步骤(11)

源码将于最后一遍文章给出下载 监测数据采集物联网应用开发步骤(10) 程序自动更新开发 前面章节写了部分功能模块开发&#xff1a; 日志或文本文件读写开发;Sqlite3数据库读写操作开发;定时器插件化开发;串口(COM)通讯开发;TCP/IP Client开发;TCP/IP Server 开发;modbus协议…

胜券汇:行业持续轮动 缺乏主线下关注反转预期的方向

前史行情4年一轮回&#xff0c;中心在于微观环境的类似性。首要&#xff0c;复盘前史&#xff0c;2016-2019年和2020年至今的行情走势较为类似&#xff0c;历经约1年半的长牛&#xff0c;约1年的长熊&#xff0c;阅历1个季度快速反弹后继续约3个季度的震动期。其次&#xff0c;…

二叉查找树(binary search tree)(难度7)

C数据结构与算法实现&#xff08;目录&#xff09; 答案在此&#xff1a;二叉查找树&#xff08;binary search tree&#xff09;&#xff08;答案&#xff09; 写在前面 部分内容参《算法导论》 基本接口实现 1 删除 删除值为value的第一个节点 删除叶子节点1 删除叶子节…

Jmete+Grafana+Prometheus+Influxdb+Nginx+Docker架构搭建压测体系/监控体系/实时压测数据展示平台+遇到问题总结

背景 需要大批量压测时&#xff0c;单机发出的压力能力有限&#xff0c;需要多台jmeter来同时进行压测&#xff1b;发压机资源不够&#xff0c;被压测系统没到瓶颈之前&#xff0c;发压机难免先发生资源不足的情形&#xff1b;反复压测时候也需要在不同机器中启动压测脚本&…

抖店的入门教程,新手开店后想快速跑通流程,必须要这么做!

我是王路飞。 作为一个在抖音刚开始开店卖货的新手商家&#xff0c;你认为对你来说&#xff0c;什么才是最重要的呢&#xff1f; 根据我做抖店这三四年的经验&#xff0c;以及所带的几百个学生的数据/结果反馈来看&#xff0c;先入门&#xff0c;永远是新手的第一要务。 只有…

股票融资50万一天利息是多少?利率可以给到5%吗?

利息股票融资50万一天利息是多少&#xff0c;需要结合您的融资利率来计算的。比如您的融资利率是8.35%&#xff0c;股票融资50万一天利息计算50万8.35%/360天115.97元&#xff0c;即&#xff1a;股票融资50万&#xff0c;一天的利息是115.97元。 股票融资利率一般是默认在8.35%…

CSRF(跨站请求伪造)和SSRF(服务端请求伪造)漏洞复现:风险与防护方法

这篇文章旨在用于网络安全学习&#xff0c;请勿进行任何非法行为&#xff0c;否则后果自负。 环境准备 一、CSRF&#xff08;跨站请求伪造&#xff09; 示例&#xff1a;假设用户在银行网站A上登录并保持会话活动&#xff0c;同时他也在浏览其他网站。攻击者在一个不可信任…

亚马逊加拿大站儿童床垫SOR安全要求SOR/2016-152

儿童床垫的安全性对于家庭的健康和孩子的成长至关重要。加拿大制定了一系列儿童产品安全法规&#xff0c;其中包括关于儿童床垫的安全要求。本文将介绍亚马逊加拿大站对儿童床垫的SOR安全要求&#xff0c;以帮助消费者选择安全可靠的产品。 本政策适用于与婴儿床、摇篮、婴儿摇…

Go死码消除

概念: 死码消除(dead code elimination, DCE) 是一种编译器优化技术, 作用是在编译阶段去掉对程序运行结果没有任何影响的代码 和 逃逸分析[1],内联优化[2]并称为 Go编译器执行的三个重要优化 效果: 对于 const.go代码如下: package mainimport "fmt"func max(a, b i…

【数据库事务】

数据库事务 何为事务事务的特性原子性 Atomicity一致性 Consistency隔离性 IsolationRead UncommittedRead CommittedRepeatable ReadSerializable 持久性 Durability功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的…

嵌入式学得多拿得少?选好方向最重要!

嵌入式开发确实是一个知识领域非常广泛的行业&#xff0c;涉及到模电、数电、C语言、EDA、单片机、RTOS、ARM、Linux等等众多方面。然而&#xff0c;关于工资少的说法其实是有误导性的。如果按照这种说法&#xff0c;那要学习几年才能达到爱因斯坦的水平了&#xff01; 事实上&…

RTSP/Onvif流媒体视频平台EasyNVR视频平台旧版本视频播放出现花屏情况的处理方法

EasyNVR安防视频云服务是基于RTSP/Onvif协议的流媒体视频平台&#xff0c;可实现设备接入、实时直播、录像、检索与回放、云存储、视频分发、级联等视频能力服务&#xff0c;能分发RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC格式的视频流。 有用户反馈&#xff0c;在现场部署…

VR全景对行业发展有什么帮助?VR全景制作需要注意什么?

引言&#xff1a; 虚拟现实&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;早已不再是科幻电影的概念&#xff0c;而是在以惊人的速度改变着我们的世界。VR全景&#xff0c;作为其中的重要组成部分&#xff0c;正为多个行业带来了全新的机遇。 一、VR全景的应用领…

对分库分表进行批量操作

对ShardingJDBC基础了解&#xff1a;https://blog.csdn.net/m0_63297646/article/details/131894472 对批量操作案例&#xff1a;https://blog.csdn.net/m0_63297646/article/details/131843517 分为db0和db1两个库&#xff0c;每个库都有三张订单表&#xff0c;分表键根据年份…

核心交换机的六个基础知识

中午好&#xff0c;我的网工朋友 今天来聊聊核心交换机啊。 首先你要明确一个概念&#xff0c;接入层交换机、汇聚层交换机、核心层交换机并非是交换机的种类或者属性&#xff0c;只是由其所执行的任务来划分的。 从网络拓扑结构来讲&#xff0c;一个计算机网络系统结构需采用…

Soul的社交元宇宙之路,还有多远?

在元宇宙概念爆火的当下&#xff0c;以互联网为依托的虚拟社交逐步为用户承载起其空缺的精神交流与寄托&#xff0c;而在这其中&#xff0c;以“跟随灵魂找到你”为Slogan&#xff0c;主打年轻人社交元宇宙平台的APP--Soul则在这条赛道上凭借着独特的风格&#xff0c;逐步突出重…

Elasticsearch 7.6 - APi基础操作篇

ES7.6-APi基础操作篇 前言相关知识索引相关创建索引查询索引查询所有索引删除索引关闭与打开索引关闭索引打开索引 冻结与解冻索引冻结索引解冻索引 映射相关创建映射查看映射新增字段映射 文档相关(CURD)新增文档根据ID查询修改文档全量覆盖根据ID选择性修改根据条件批量更新 …