javascript时间与时间戳互转多种方式

 更新时间:2023年11月13日 11:47:20   作者:上网的虫不叫网虫  
javascript获取时间、时间戳等,最核心的就是利用Date关键词去获取,时间戳的获取方式整理了5种方法,后4种是利用new Date()实例化对象来获取当前时间,再对当前获取的时间再进一步处理获取时间戳,本文给大家介绍的非常详细,需要的朋友参考下吧

javascript获取时间、时间戳等,最核心的就是利用Date关键词去获取。

一、javascript获取时间戳

时间戳的获取方式整理了5种方法,后4种是利用new Date()实例化对象来获取当前时间,再对当前获取的时间再进一步处理获取时间戳。下面获取的时间戳都是毫秒ms级别,如果要转换成秒s级别,可以在获取的结果除以1000即可。

方式一: Date.now()

Date.now()获取当前时间戳:

Date.now() // 1667960502653

方式二: getTime()

getTime()是通过原型方法直接获取当前时间戳:

new Date().getTime() // 1667961973698
new Date('2022-11-09 23:59:59').getTime() // 1668009599000

方式三: Date.parse()

Date.parse()将字符串或者时间对象直接转化成时间戳:

Date.parse(new Date()) // 1667960585000
Date.parse(new Date('2022-11-09 12:00:00')) // 1667966400000
Date.parse('2022-11-09 23:59:59') // 1667966400000

注意:该方式将毫秒级别的数值被转化为000,如果是用秒级别的时间戳且不保留小数的可以使用该方式,如果精确到毫秒级别,不推荐使用。

方式四: valueOf()

valueOf()返回指定对象的原始值获得准确的时间戳:

(new Date()).valueOf() // 1667962876782
(new Date('2022-11-09 23:59:59')).valueOf() // 1668009599000

方式五: Number()

Number()将时间对象转化成Number类型的时间戳:

Number(new Date()) // 1667962087928
Number(new Date('2022-11-09 23:59:59')) // 1668009599000

二、javascript时间戳转时间

时间戳转时间的应用场景还是比较常见的,一般在后端返回到前端的数据中可能是时间戳,在前端就需要转换成具体的时间展示,接下来整理几种时间戳转时间的方法及注意事项。

可以用new Date(时间戳)将时间戳转化成中国标准时间,示例:

new Date(1668009599000);
Wed Nov 09 2022 23:59:59 GMT+0800 (中国标准时间) 

注意:时间戳必须是Number类型,如果是字符串,解析结果:Invalid Date

如果后端直接返回时间戳给前端,前端如何转换呢?下面介绍2种实现方式:

方式一:生成’2022/11/9 23:59’格式

function getLocalTime(n) {   
	return new Date(parseInt(n)).toLocaleString().replace(/:\d{1,2}$/,' ');   
}
getLocalTime(1668009599000);  2022/11/9 23:59

也可以使用字符串截取的方法,想取几位就几位,注意:空格也算:

function getLocalTime(n) {   
	return new Date(parseInt(n)).toLocaleString().substr(0,16)
}
getLocalTime(1668009599000);  2022/11/9 23:59

使用正则表达式的方式:

function getLocalTime(n) {   
	return new Date(parseInt(n)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
}
getLocalTime(1668009599000);  2022/11/9 23:59:59

方式二:生成’yyyy-MM-dd hh:mm:ss’格式

function getDate(n){
	n=new Date(n);
	return n.toLocaleDateString().replace(/\//g, "-") + " " + n.toTimeString().substr(0, 8);
}
getDate(1668009599000);  2022-11-9 23:59:59

这种方式在浏览器上面有兼容性问题,toLocaleDateString()方法是因浏览器而异,比如IE为"2016年8月24日 22:26:19"格式 ;搜狗为"Wednesday, August 24, 2016 22:39:42"

可以用以下方式拥有更好的兼容:

function getData(n) {
	let now = new Date(n),
	y = now.getFullYear(),
	m = now.getMonth() + 1,
	d = now.getDate();
	return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
}
getDate(1668009599000);  2022-11-09 23:59:59

到此这篇关于javascript时间与时间戳互转详解的文章就介绍到这了,更多相关js 时间与时间戳互转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • IE6下CSS图片缓存问题解决方法

    IE6下CSS图片缓存问题解决方法

    ie6下如果用css图片平铺,会出现cpu短暂100%的情况,主要原因在于,ie6会重复下载图片。
    2010-12-12
  • js图片轮播手动切换特效

    js图片轮播手动切换特效

    这篇文章主要为大家详细介绍了js图片轮播手动切换特效,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • JS中toFixed()方法四舍五入的精度问题详解

    JS中toFixed()方法四舍五入的精度问题详解

    最近在做项目的时候,遇到了有四舍五入保留两位的需求,当时不假思索的直接使用了js原生的toFixed方法,结果出现了问题,这篇文章主要给大家介绍了关于JS中toFixed()方法四舍五入精度问题的相关资料,需要的朋友可以参考下
    2021-10-10
  • 详解webpack自动生成html页面

    详解webpack自动生成html页面

    本篇文章主要介绍了详解webpack自动生成页面,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • echarts折线图月份数据不足自动补0和日期达到数据连续的效果(最新推荐)

    echarts折线图月份数据不足自动补0和日期达到数据连续的效果(最新推荐)

    这篇文章主要介绍了echarts折线图月份数据不足自动补0和日期达到数据连续的效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-03-03
  • 详解JS实现简单的时分秒倒计时代码

    详解JS实现简单的时分秒倒计时代码

    这篇文章主要介绍了JS时分秒倒计时的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • uni-app设置缓存过期时间的操作方法

    uni-app设置缓存过期时间的操作方法

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序,本文给大家介绍了uni-app设置缓存过期时间的操作方法,需要的朋友可以参考下
    2024-12-12
  • Layui 导航默认展开和菜单栏选中高亮设置的方法

    Layui 导航默认展开和菜单栏选中高亮设置的方法

    今天小编就为大家分享一篇Layui 导航默认展开和菜单栏选中高亮设置的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • js自己实现一个大文件切片上传+断点续传的示例代码

    js自己实现一个大文件切片上传+断点续传的示例代码

    本文主要介绍了js自己实现一个大文件切片上传+断点续传的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 基于cssSlidy.js插件实现响应式手机图片轮播效果

    基于cssSlidy.js插件实现响应式手机图片轮播效果

    cssSlidy是一款支持手机移动端的焦点图轮播插件,支持标题设置,滑动动画,间隔时间等。这篇文章主要基于cssSlidy.js插件实现响应式手机图片轮播效果,
    2016-08-08

最新评论