js 各种时间格式的转换

news2024/11/19 15:39:11

js 各种时间格式的转换

时间格式示例
中国标准时间Fri Mar 18 2022 14:24:45 GMT+0800(中国标准时间)
部分可读字符串Fri Mar 18 2022
格林威治时间Fri,18 Mar 2022 06:24:45 GMT
现在用的时间标准UTCFri Mar 18 2022 06:24:45 GMT
IOS标准时间(JSON时间格式)2022-03-18T06:24:45.061Z
常见时间格式2022-03-18 14:24:45

注意:UTC时间不等于GMT时间

GMT:Greenwich Mean Time
格林尼治标准时间。这是以英国格林尼治天文台观测结果得出的时间,这是英国格林尼治当地时间,这个地方的当地时间过去被当成世界标准的时间。

UT:Universal Time 世界时。根据原子钟计算出来的时间。

UTC:Coordinated Universal Time
协调世界时。因为地球自转越来越慢,每年都会比前一年多出零点几秒,每隔几年协调世界时组织都会给世界时+1秒,让基于原子钟的世界时和基于天文学(人类感知)的格林尼治标准时间相差不至于太大。并将得到的时间称为UTC,这是现在使用的世界标准时间。

协调世界时不与任何地区位置相关,也不代表此刻某地的时间,所以在说明某地时间时要加上时区

也就是说GMT并不等于UTC

作者:杨赟 链接:https://www.zhihu.com/question/27052407/answer/1440913686
来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

获取时间

	        var newDate = new Date();
			
			console.log('newDate',newDate)
			
			//Fri Mar 18 2022 14:24:45 GMT+0800(中国标准时间)
			
			1.把 Date 对象的日期部分转换为可读字符串:
			
			console.log('toDateString',newDate.toDateString());
			
			// Fri Mar 18 2022
			
			2.根据格林威治时间 (GMT) 把 Date 对象转换为字符串(需注意的是)
			
			console.log('toGMTString',newDate.toGMTString());
			
			// Fri,18 Mar 2022 06:24:45 GMT
			
			不建议使用,因为此日期会在转换为字符串之前由本地时区转换为 GMT 时区。
			
			例如:传入具体时间
			
			var localDate=new Date('July 21, 1983 01:15:00')
			
			console.log(localDate.toGMTString())
			
			// Wed, 20 Jul 1983 17:15:00 GMT
			
			输出的时间会和传入的时间有时差
			
			3.使用 ISO 标准返回 Date 对象的字符串格式:
			
			console.log('toISOString',newDate.toISOString());
			
			// 2022-03-18T06:24:45.061Z
			
			
			4.将 Date 对象转换为字符串,并格式化为 JSON 数据格式。
			
			console.log('toJSON',newDate.toJSON());
			
			// 2022-03-18T06:24:45.061Z
			
			5.根据本地时间把 Date 对象的日期部分转换为字符串:
			
			console.log('toLocaleDateString',newDate.toLocaleDateString());
			
			// 2022/3/18
			
			6.根据本地时间把 Date 对象转换为字符串:
			
			console.log('toLocaleString',newDate.toLocaleString());
			
			// 2022/3/18 下午2:24:45
			
			7.根据本地时间把 Date 对象的时间部分转换为字符串:
			
			console.log('toLocaleTimeString',newDate.toLocaleTimeString());
			
			// 下午2:24:45
			
			8. Date 对象转换为字符串。
			
			console.log('toString',newDate.toString());
			
			// Fri Mar 18 2022 14:24:45 GMT+0800(中国标准时间)
			
			9.把 Date 对象的时间部分转换为字符串:
			
			console.log('toTimeString',newDate.toTimeString());
			
			// 14:24:45 GMT+0800(中国标准时间)
			
			10.根据世界时 (UTC) 把 Date 对象转换为字符串:
			
			console.log('toUTCString',newDate.toUTCString());
			
			//  Fri Mar 18 2022 06:24:45 GMT

日期转时间戳

var date = new Date(); // 当前时间
console.log('date',date)

三种方法:
var time1 = date.getTime();
var time2 = date.valueOf();
var time3 = Date.parse(date);

console.log('time1',time1)
console.log('time2',time2)
console.log('time3',time3)

在这里插入图片描述

注意:如果是用JSON格式的时间去转换时间戳的话,获取的时间有相差

        var date =new Date('2022-03-16T16:00:00.000Z'); // 当前时间
		console.log('date',date)
		var time1 = date.getTime();
		var time2 = date.valueOf();
		var time3 = Date.parse(date);
		console.log('time1',time1)
		console.log('time2',time2)
		console.log('time3',time3)

在这里插入图片描述

时间戳转日期

function add0(m){return m<10?'0'+m:m }
function format(shijianchuo)
{
//shijianchuo是整数,否则要parseInt转换
var time = new Date(shijianchuo); //时间戳为10位需*1000,时间戳为13位的话不需乘1000
var y = time.getFullYear();
var m = time.getMonth()+1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y+'-'+add0(m)+'-'+add0(d)+' '+add0(h)+':'+add0(mm)+':'+add0(s);
}

但是如果是‘2022-03-16T16:00:00.000Z’这种时间格式的话,上面那种方式获取的时间有误
可以试试这种方法

  var time = '2022-03-16T16:00:00.000Z'
      time = time.replace(/-/, '年')
      time = time.replace(/-/, '月')
      time = time.replace(/T/, '日')
      let times = time.split('.')
      console.log(times[0])
      //2022年03月16日16:00:00

如果是vue2的项目的话,你可以封装一个过滤器

// 封装项目中需要使用到的过滤器
import moment from 'moment'
// 1.时间日期过滤器
// 参数说明:不管是否传递了参数,都会有一个默认参数,就是管道符前面的数据
// 意味着用户参数从参数列表的第二个开始
export const dateFormat = (data, spe = '-') => {
  return moment(data).format('YYYY-MM-DD HH:mm:ss')
}
引入
import { dateFormat } from '@/utils/myfilters.js'
定义
filters: {
    dateFormat
  },
使用
<div class="time">{{currentUser.date | dateFormat}}</div>

当然啦,还有一种方法,就是用dayjs库,具体详情可以自己去官网上看,在这里我就不多叙述啦
附上官网https://dayjs.fenxianglu.cn/

完结啦!!!
喜欢的留下你的小脚丫!

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

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

相关文章

Echarts常用配置项

一、常用配置项描述 title:{}//标题组件 tooltip:{},//提示框组件 yAxis:[],//y轴 xAxis:[],//x轴 legend:{},//图例组件 grid:{},//内绘网格 toolbox:{},//工具 series:[],//数据有关 calculable:true//可计…

JS高级中的constructor构造函数

1.对象原型__proto__和构造函数原型对象prototype里面都有一个constructor属性 2.constructor 称为构造函数 因为它的作用是用于new的实例对象指回构造函数本身 3.constructor 主要用于记录该对象是用于那个构造函数 它可以让原型对象prototype重新指向原来构造他的构造函数…

Vue|计算属性

1. 计算属性1.1 差值语法1.2 methods1.3 计算属性1. 计算属性 1.1 差值语法 开始前分别在项目目录创建文件夹及页面如下 需求1&#xff1a;在两个文本框中分别输入姓和名的同时需要在下方将数据进行拼接组装&#xff0c;效果如下图 如果用传统的方式来实现的话&#xff0c;需要…

vue2.x的h函数(createElement)与vue3中的h函数

1. vue2.x的 h 函数(createElement) 使用方法及介绍&#xff1a;&#xff08;参考官网提取&#xff09;h函数第一个是标签名字 或者是组件名字&#xff0c;第二个参数是配置项&#xff0c;第三个参数是 innerText &#xff0c;不会帮你转换节点&#xff0c;如果需要转换成节点…

background-size 之 背景图的尺寸设置

目录 一&#xff1a;background-size参数取值 1.0 1.1 二&#xff1a;实例分析 2.1 参数分析 2.2 代码实例分析 引&#xff1a;background-size: 没有设置任何尺寸时使用图片本身的大小&#xff0c;宽度和高度都是auto默认值 可以用px设置成具体的值&#xff0c;也可以使…

二、pytest+selenium+allure实现web ui自动化

上一章&#xff1a; 一、web ui自动化环境搭建 pytestallureselenium_傲娇的喵酱的博客-CSDN博客_pytestseleniumallure pytest二次开发相关文章&#xff1a; pytest框架二次开发之自定义注解_傲娇的喵酱的博客-CSDN博客 pytest框架二次开发之机器人报警_傲娇的喵酱的博客-…

前端面试:浅拷贝和深拷贝的区别?

前些天发现了一个巨牛的人工智能学习博客&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转 那么大家晚上好&#xff0c;我是今天晚上的主讲老师&#xff0c;我是兔哥。 我们在面试中经常会被问到浅拷贝和深拷贝的区别&#xff0c;正好群里…

百度低代码框架amis介绍及实例讲解

目录引言为什么用amis&#xff1f;官网这么说的amis不适合做什么&#xff1f;amis框架集成配置与组件概念实例&#xff1a;通过一个CRUD组件实现增删改查列表列表查询查看详情自定义操作按钮提交表单引言 目前低代码概念已经无人不知&#xff0c;随着新冠病毒的爆发&#xff0…

修改elementUI样式未生效问题(挂载到了body标签上)

修改挂载到body标签上elementUI样式问题 目录修改挂载到body标签上elementUI样式问题前言一、适用范围二、示例1.目标2.实现思路修改自带样式方法最后看效果总结前言 在使用element-ui库的时候&#xff0c;有时会需要修改它自带的css样式&#xff0c;组件模块化化编程时一般会…

【Vue3中的响应式原理】

Vue3响应式原理 在Vue2的响应式中&#xff0c;存在着新增属性&#xff0c;删除属性以及直接通过下标修改数组&#xff0c;但页面不会自动更新的问题。但是在Vue3中&#xff0c;这些问题都得以解决。 Vue2中的响应式原理 首先我们先看一下Vue2中的响应式原理&#xff0c;其次…

vantUI van-picker中的column使用,picker选择器展示对象数组里面的属性,自定义展示数据

项目场景&#xff1a; 需要VantUI实现的功能 问题描述 vant中的picker选择器&#xff0c;只能用这种数组&#xff0c;来展示数据 columns: [‘杭州’, ‘宁波’, ‘温州’, ‘绍兴’, ‘湖州’, ‘嘉兴’, ‘金华’, ‘衢州’], 往往我们的请求数据&#xff0c;都是这样的。对…

::before和::after是什么?

本文从最简单的开始&#xff0c;解释如何理解和使用::before和::after。然后再在实际使用场景中去应用它。 ::before和::after可以添加到选择器以创建伪元素的关键字。伪元素被插入到与选择器匹配的元素内容之前或之后。 content属性 1&#xff09;::before和::after下特有的c…

图文详解vue.js devtools插件使用方法

Vue.js devtools 背景简介 我们chrome插件网之前介绍过Vue.js devtools&#xff0c;是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展&#xff0c;可以在浏览器开发者工具下调试代码。做前端开发的IT工程师应该比较熟悉这款工具&#xff0c;可以边侧边栏窗格…

【前端写java接口】前端用java写一个简单的后端接口并和前端交互数据【以前端角度解释,详细注释,谁都看得懂】

先声明&#xff1a; 我不是做后端的&#xff0c;我是前端的&#xff0c;然后想要做一个后端的接口平常用来测试测试前端的页面&#xff0c;所以百度加上看看视频学了几天&#xff0c;简单的做一个&#xff0c;可能很多不专业的地方&#xff0c;后端小哥们别太严格哈&#xff0…

【react】什么是fiber?fiber解决了什么问题?从源码角度深入了解fiber运行机制与diff执行

壹 ❀ 引 我在[react] 什么是虚拟dom&#xff1f;虚拟dom比操作原生dom要快吗&#xff1f;虚拟dom是如何转变成真实dom并渲染到页面的?一文中&#xff0c;介绍了虚拟dom的概念&#xff0c;以及react中虚拟dom的使用场景。那么按照之前的约定&#xff0c;本文来聊聊react中另一…

Vue中实现清空数组和清空el-table

场景 要实现的效果是 那么就要用到怎样将这个el-table清空&#xff0c;即在vue中怎样将数组清空。 注&#xff1a; 博客&#xff1a;霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主 关注公众号 霸道的程序猿 获取编程相关电子书、教程推送与免费下载。 实现 …

JavaScript 教程 (详细 全面)

文章目录JavaScript 是什么&#xff1f;JavaScript 简介1. JavaScript 的历史2. JavaScript 与 ECMAScript 的关系3. 如何运行 JavaScript4. JavaScript 具有以下特点Node.js 是什么&#xff1f;Node.js 简介1. 运行时是什么&#xff1f;2. Node.js 的诞生3. Node.js 的组成4. …

uniapp实现上拉加载更多

目录 一、添加全部 1.在主页面中添加一列 2.改云函数 3.插件市场导入 加载中组件 二、实现上拉加载 1.云函数中可以接收参数 2.获取下拉事件 3.写触发这个下拉干嘛 在 显示加载中的组件里面 一、添加全部 1.在主页面中添加一列 data.unshift({name:全部}) //添加一列 …

尚品汇项目笔记(持续更新中)

项目网络教学视频链接&#xff1a;尚硅谷VUE项目实战&#xff0c;前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili 目录 一、 使用vue-cli脚手架去初始化项目 二、项目的其他配置 三、项目路由分析 四、创建Header和Footer非路由组件 五、完成路由组件的搭建 六、利用【路…

uniapp使用iconfonts图标不显示以及颜色问题

在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题&#xff0c; 以及图标显示了但是为一个小正方形的问题&#xff0c; 同时包括图标颜色不显示的问题。 以下方式解决了这三个问题&#xff08;适用class方式引入&#xff09; 1&#xff0c;iconfont图标的引入…