JavaScript时间戳函数的方法

一、JavasCRIPT时间转时间戳

JavaScript获得时间戳的方法有五种,后四种都是通过实例化时间对象new Date() 来进一步获取当前的时间戳,JavaScript处理时间主要使用时间对象Date。

方法一:Date.now()

Date.now()可以获得当前的时间戳:

javascript 复制代码
console.log(Date.now()) //1642471441587

方法二:Date.parse()

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

vbnet 复制代码
Date.parse(new Date()) //1642471535000Date.parse("2022/1/18 10:05") //1642471500000

注意:不推荐这种办法,毫秒级别的数值被转化为000。

方法三:valueOf()

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

javascript 复制代码
(new Date()).valueOf() //1642471624512

方法四:getTime()

通过原型方法直接获得当前时间的毫秒值,准确:

scss 复制代码
new Date().getTime() //1642471711588

方法五:Number

将时间对象转化为一个number类型的数值,即时间戳

javascript 复制代码
Number(new Date()) //1642471746435

二、js时间戳转时间

我们可以接用 new Date(时间戳) 格式转化获得当前时间,比如:

javascript 复制代码
new Date(1472048779952)Wed Aug 24 2016 22:26:19 GMT+0800 (中国标准时间)

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

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

方法一:生成'2022/1/18 上午10:09 '格式

javascript 复制代码
function getLocalTime(n) {return new Date(parseInt(n)).toLocaleString().replace(/:\d{1,2}$/,' ');}getLocalTime(1642471746435) //'2022/1/18 上午10:09 '

也可以用如下,想取几位就几位,注意,空格也算!

scss 复制代码
function getLocalTime(n) {return new Date(parseInt(n)).toLocaleString().substr(0,14)}getLocalTime(1642471746435) //'2022/1/18 上午10'

或者利用正则:

javascript 复制代码
function  getLocalTime(n){return new Date(parseInt(n)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");}getLocalTime  (1642471746435)  //'2022/1/18 上午10:09:06'

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

先转换为data对象,然后利用拼接正则等手段来实现:

scss 复制代码
function getData(n){n=new Date(n)return n.toLocaleDateString().replace(///g, "-") + " " + n.toTimeString().substr(0, 8)}getData(1642471746435) //'2022-1-18 10:09:06'

不过这样转换在某些浏览器上会出现不理想的效果,因为toLocaleDateString()方法是因浏览器而异的,比如 IE为"2016年8月24日 22:26:19"格式 ;搜狗为"Wednesday, August 24, 2016 22:39:42"

可以通过分别获取时间的年月日进行拼接,这样兼容性更好:

vbscript 复制代码
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);}getData(1642471746435) //'2022-1-18 10:09:06'

三、知识普及

1、当前系统区域设置格式(toLocaleDateString和toLocaleTimeString)

vbscript 复制代码
(new Date()).toLocaleDateString() + " " + (new Date()).toLocaleTimeString()//'2022/1/18 上午10:30:30'

2、普通字符串(toDateString和toTimeString)

vbscript 复制代码
(new Date()).toDateString() + " " + (new Date()).toTimeString()//'Tue Jan 18 2022 10:30:50 GMT+0800 (中国标准时间)'

3、格林威治标准时间(toGMTString)

javascript 复制代码
(new Date()).toGMTString()//'Tue, 18 Jan 2022 02:31:10 GMT'

4、全球标准时间(toUTCString)

javascript 复制代码
(new Date()).toUTCString()//'Tue, 18 Jan 2022 02:31:25 GMT'

5、Date对象字符串(toString)

vbscript 复制代码
(new Date()).toString()'Tue Jan 18 2022 10:31:44 GMT+0800 (中国标准时间)'
Date对象构造函数

Date对象具有多种构造函数:

sql 复制代码
new Date()new Date(milliseconds)new Date(datestring)new Date(year, month)new Date(year, month, day)new Date(year, month, day, hours)new Date(year, month, day, hours, minutes)new Date(year, month, day, hours, minutes, seconds)new Date(year, month, day, hours, minutes, seconds, microseconds)
Date对象构造函数参数说明:
scss 复制代码
milliseconds - 距离JavaScript内部定义的起始时间1970年1月1日的毫秒数datestring - 字符串代表的日期与时间。此字符串可以使用Date.parse()转换year - 四位数的年份,如果取值为0-99,则在其之上加上1900month - 0(代表一月)-11(代表十二月)之间的月份day - 1-31之间的日期hours - 0(代表午夜)-23之间的小时数minutes - 0-59之间的分钟数seconds - 0-59之间的秒数microseconds - 0-999之间的毫秒数
Date对象返回值

如果没有任何参数,将返回当前日期;

如果参数为一个数字,将数字视为毫秒值,转换为日期

如果参数为一个字符串,将字符串视为日期的字符串表示,转换为日期

还可以使用六个构造函数精确定义,并返回时间

scss 复制代码
var d1 = new Date();document.write(d1.toString());var d2 = new Date("2009-08-08 12:12:12); document.write(d2.toString()); var d3 = new Date(2009, 8, 8); document.write(d3.toString());

Date做为JavaScript的一种内置对象,必须使用new的方式创建。

Date对象在JavaScript内部的表示方式是,距1970年1月1日午夜(GMT时间)的毫秒数(时间戳),我们在这里也把Date的内部表示形式称为时间戳。

可以使用getTime()将Date对象转换为Date的时间戳,方法setTime()可以把Date的时间戳转换为Date的标准形式。

Date函数使用语法

date.方法名(参数1,参数2,...);

Date.方法名();

date代表一个日期对象的实例,Date代表日期对象,date.方法名调用的为对象的成员函数

Date.方法名调用的为对象的静态函数

javascript 复制代码
var d=new Date();var d2=Date.UTC();
相关推荐
爱学习的程序媛26 分钟前
【Web前端】深入解析JavaScript异步编程
开发语言·前端·javascript·ecmascript·web
wefly20171 小时前
m3u8live.cn:免安装 HLS 在线播放器,流媒体调试效率神器
开发语言·javascript·python·django·ecmascript·hls.js 原理·m3u8 解析
J_liaty1 小时前
JavaScript 基础知识全解析:从入门到精通
开发语言·javascript
天若有情6731 小时前
前端HTML精讲02:表单高阶用法+原生校验,告别冗余JS,提升开发效率
前端·javascript·html
蜡台1 小时前
Vue 组件通信的 12 种解决方案
前端·javascript·vue.js·props
吴声子夜歌1 小时前
TypeScript——局部类型、联合类型、交叉类型
javascript·git·typescript
wefly20172 小时前
jsontop.cn:一站式 JSON 全能工具集,开发全流程效率神器
前端·javascript·python·django·json·json在线转换
YAY_tyy5 小时前
Vue3 + Three.js 实战:自定义 3D 模型加载与交互全流程
前端·javascript·vue.js·threejs
英俊潇洒美少年6 小时前
SSE 流式接口讲解
javascript
我命由我1234511 小时前
React Router 6 - 编程式路由导航、useInRouterContext、useNavigationType
前端·javascript·react.js·前端框架·html·ecmascript·js