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

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()-2460601000i).format("YYYY-MM-DD")

console.log(date)

}

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

<template>

{{this.datetime}}

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