js 将时间戳转yyyy-MM-dd HH-mm-ss工具类

朱雀 2022-05-24 13:53 49阅读 0赞

在web开发中，我们经常需要用js将时间戳转yyyy-MM-dd HH-mm-ss类似的格式，这样才适合我们的观感，那么我们该如何在js中将时间戳转换成这种格式呢？其实很简单，我们开发一个时间戳工具类，如下：

第一种:最简单的是一个js时间格式的转换函数方法

\[html\]  [view plain][]   [copy][view plain]

1.  function formatDateTime(inputTime) \{    
2.      var date = new Date(inputTime\*1000);  //时间戳为10位需\*1000，时间戳为13位的话不需乘1000
3.      var y = date.getFullYear();    
4.      var m = date.getMonth() + 1;    
5.      m = m **<** 10 ? ('0' + m) : m;    
6.      var d = date.getDate();    
7.      d = d **<** 10 ? ('0' + d) : d;    
8.      var h = date.getHours();  
9.      h = h **<** 10 ? ('0' + h) : h;  
10.     var minute = date.getMinutes();  
11.     var second = date.getSeconds();  
12.     minute = minute **<** 10 ? ('0' + minute) : minute;    
13.     second = second **<** 10 ? ('0' + second) : second;   
14.     return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;    
15. \};

然后这样在jsp或html页面调用这个js时间转换方法就可以了：

\[html\]  [view plain][]   [copy][view plain]

1.  formatDateTime(inputTime);

1. 将时间戳转换成日期格式：

<table style="border-spacing:0px;border:1px solid #C0C0C0;background:none;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;"> 
 <tbody style="background:none;line-height:1.1em;vertical-align:baseline;min-height:auto;"> 
  <tr style="background:none;border-top:0px;line-height:1.1em;vertical-align:baseline;min-height:auto;"> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;background:none;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;color:rgb(175,175,175);"> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      1 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      2 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      3 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      4 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      5 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      6 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      7 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      8 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      9 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      10 
    </div> 
    <div style="background:rgb(244,244,244) none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      11 
    </div> 
    <div style="background-image:none;border-width:0px 2px 0px 0px;border-right-style:solid;border-right-color:rgb(108,226,108);line-height:1.8em;text-align:right;vertical-align:baseline;min-height:auto;">
      12 
    </div></td> 
   <td style="border-color:#C0C0C0;border-collapse:collapse;background:none;line-height:1.1em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;font-size:12px;min-height:auto;"> 
    <div style="background:none;border:0px;line-height:1.1em;vertical-align:baseline;min-height:auto;"> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,255);">function</code>&nbsp; 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">timestampToTime(timestamp) { </code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,255);">var</code>&nbsp; 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">date =&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,255);">new</code>&nbsp; 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">Date(timestamp * 1000);</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,130,0);">//时间戳为10位需*1000，时间戳为13位的话不需乘1000</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">Y = date.getFullYear() +&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">'-'</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">;</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">M = (date.getMonth()+1 &lt; 10 ?&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">'0'</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">+(date.getMonth()+1) : date.getMonth()+1) +&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">'-'</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">;</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">D = date.getDate() +&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">' '</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">;</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">h = date.getHours() +&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">':'</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">;</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">m = date.getMinutes() +&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:#0000FF;">':'</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">;</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">s = date.getSeconds();</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,255);">return</code>&nbsp; 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">Y+M+D+h+m+s;</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">}</code> 
     </div> 
     <div style="background:rgb(244,244,244) none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">timestampToTime(1403058804);</code> 
     </div> 
     <div style="background-image:none;border:0px;line-height:1.8em;vertical-align:baseline;min-height:auto;"> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,0,0);">console.log(timestampToTime(1403058804));</code> 
      <code style="background:none;border:0px;line-height:1.8em;vertical-align:baseline;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;min-height:auto;color:rgb(0,130,0);">//2014-06-18 10:33:24</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

注意：如果是Unix时间戳记得乘以1000。比如：PHP函数time()获得的时间戳就要乘以1000。

2. 将日期格式转换成时间戳：

以上三种获取方式的区别：

第一、第二种：会精确到毫秒

第三种：只能精确到秒，毫秒用000替代

以上三个输出结果可观察其区别

注意：获取到的时间戳除以1000就可获得Unix时间戳，就可传值给后台得到。

[view plain]: https://blog.csdn.net/shan1774965666/article/details/55049819#