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

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)
}