前端把时间转换成时间戳（前端常见的时间转换方法合集+动态时钟效果实现）

1.将时间戳转换为YYYY-MM-DD HH:mm:ss格式-老方法

通过对应的年月日时分秒依次进行拼接 
    
    
    
，另外还需要对小于10的值进行处理
     


     


     


 ，在前面添加字符串‘0’ 




 




 




 ，转换为常见的两位数时间格式

function transformTime(timestamp = +new Date()) {

    if (timestamp) {

        var time = new Date(timestamp);

        var y = time.getFullYear();

        var M = time.getMonth() + 1;

        var d = time.getDate();

        var h = time.getHours();

        var m = time.getMinutes();

        var s = time.getSeconds();

        return y + - + addZero(M) + - + addZero(d) + + addZero(h) + : + addZero(m) + : + addZero(s);

      } else {

          return ;

      }

}

function addZero(m) {

    return m < 10 ? 0 + m : m;

}

transformTime(); // "2023-01-25 15:25:28"

老方法优化思路：

new Date().toJSON获取的是格林威治时间的JSON字符串 

   

   

   

，例如：2023-01-25T15:39:11.803Z

转化为北京时间需要额外增加八个时区
     

     

     

，也就是在当前时间戳的基础上增加8个小时

我们需要的是字符串前19位  




  




  




  ，再把‘T’替换为空格 


  


  


  

，就是我们需要的时间格式

function time(time = +new Date()) {

  var date = new Date(time + 8 * 3600 * 1000) // 增加8小时

  return date

    .toJSON()

    .substr(0, 19)

    .replace(T,   )

}

time() // 2023-01-25 15:39:11

2.vue中时间转换插件：moment.js

(1)下载安装包

npm install moment --save

（2）在main.js中引入

import moment from moment

Vue.prototype.$moment = moment

（3）使用

moment(需要转换的时间).format(目标转换格式); 

this.$moment(需要转换的时间).format(YYYY-MM-DD) 

更多时间转换格式
     
     
     
，详细可见官网：Moment.js 中文网

​

 3.vue 动态显示实时时间/时间格式化插件：dayjs

(1)下载安装包

npm install dayjs --save

（2）在main.js中引入   




   




   




  ，全局使用

import dayjs from "dayjs"

Vue.prototype.dayjs = dayjs; 

（3）具体使用

this.dayjs().format(YYYY-MM-DD)  // 当前日期：年月日

this.dayjs().format("YYYY-MM-DD HH:mm:ss")  // 当前日期：年月日 时分秒

/* 获取过去七天时间 */

 for (let i = 6; i >= 0; i--) {

   let date = this.dayjs(this.dayjs()-24*60*60*1000*i).format("YYYY-MM-DD")

   console.log(date)

 }

 dayjs实现钟表效果-实时显示时间

<template>

  <div id="app">

    {{this.datetime}}

  </div>

</template>

<script>

  export default {

    name: "app",

    data() {

      return {

        timer: ,

        datetime:

      }

    },

    mounted() {

      /* 每秒定时刷新 */

      this.timer = setInterval(() => {

        this.datetime = this.dayjs().format("YYYY-MM-DD HH:mm:ss")

        console.log(this.datetime)

      }, 1000)

    },

    beforeDestroy() {

      /* 离开页面前销毁定时器 */

      if(this.timer){

        clearInterval(this.timer);

      }

    }

  };

</script>

4.将Excel日期时间上传后转成标准时间 

function formatExcelDate(numb, format = /) {

  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)

  time.setYear(time.getFullYear())

  const year = time.getFullYear() +

  const month = time.getMonth() + 1 +

  const date = time.getDate() +

  if (format && format.length === 1) {

    return year + format + month + format + date

  }

  return year + (month < 10 ? 0 + month : month) + (date < 10 ? 0 + date : date)

}