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>
文章来源:https://www.toymoban.com/news/detail-780406.html
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)
}文章来源地址https://www.toymoban.com/news/detail-780406.html
到了这里,关于前端常见的时间转换方法合集+动态时钟效果实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!