常见的javascript日期和时间戳互相转化

2018-08-09 admin

写在前面

前两天写了一篇《常见的Javascript获取时间戳》,今天来一篇续集吧,日期和时间戳的互转

预备知识

  • 知道什么是时间戳:即距离1970年01月01日00时00分00秒的毫秒数(如果你要用到的是秒,那也行,单位问题而已)。
  • 知道为什么需要把日期转化成时间戳:对于前端来说,接触的到的时间多是2018-08-08这种形式的,但是在拉取后端数据时,一般要把时间转化成时间戳再传过去。同样的道理要会把时间戳转化成我们想要的日期格式。

时间 -> 时间戳 (2018/08/09 10:10:10 -> 1533780610000 )

通常我们用到的时间格式分两种2018/08/09 10:10:10或者2018-08-09 10:10:10,幸运的是js的Date对象很好的支持了这种格式的时间,通常我们可以通过

new Date('2018/08/09 10:10:10').getTime()或者
new Date('2018-08-09 10:10:10').getTime()来获取到时间戳

但是!!!! ie对于第二种不支持 如下图:

clipboard.png

因此,请采用以下的代码

let time = '2018-08-09 10:10:10'
time = time.replace(/-/g, '/') // 把所有-转化成/
let timestamp = new Date(time).getTime()  

clipboard.png

时间戳 -> 时间 (1533780610000 -> 2018/08/09 10:10:10)

这里要用到Date对象的一系列get方法,思路是先根据时间戳new一个Date对象,然后通过一系列get方法分别拿到年月日时分秒,再拼接字符串。

function timestampToTime (timestamp) {
    const dateObj = new Date(+timestamp) // ps, 必须是数字类型,不能是字符串, +运算符把字符串转化为数字,更兼容
    const year = dateObj.getFullYear() // 获取年,
    const month = dateObj.getMonth() + 1 // 获取月,必须要加1,因为月份是从0开始计算的
    const date = dateObj.getDate() // 获取日,记得区分getDay()方法是获取星期几的。
    const hours = pad(dateObj.getHours())  // 获取时, pad函数用来补0
    const minutes =  pad(dateObj.getMinutes()) // 获取分
    const seconds =  pad(dateObj.getSeconds()) // 获取秒
    return year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + seconds
}

function pad(str) {
    return +str >= 10 ? str : '0' + str
}

timestampToTime(1533773345000)
timestampToTime(1533780610000)

clipboard.png

总结

有几个小点需要注意

  • 为了兼容,将横线换成斜杠(2018-08-09 10:10:10 => 2018/08/09 10:10:10)
  • 获取月份时,要加1
  • getDate获取日期,getDay是用来获取是一个星期的第几天
  • 根据需求做适当的补0,2018-8-9 08:09:05 要比 2018-8-9 8:9:5好看的多。

原文链接:https://segmentfault.com/a/1190000015944267

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37623.html

文章标题:常见的javascript日期和时间戳互相转化

相关文章
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
typeof、instanceof和contructor的区别
typeof:以字符串的形式返回变量的原始类型,typeof在两种情况下会返回"undefined":一个变量没有被声明的时候,和一个变量的值是undefined的时候,注意,typeof null也会返回object,...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 <span id=“mt9” class=“sent...
2015-11-12
如何为高负载网络优化Nginx 和 Node.js?
译者:AlfredCheung 在搭建高吞吐量web应用这个议题上,NginX和Node.js可谓是天生一对。他们都是基于事件驱动模型而设计,可以轻易突破Apache等传统web服务器的C10K瓶颈。预设的配置已经可以获得很高的并发,不过,...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
回到顶部