话说在牵头,我是小白,做笔记的哦~
效果图如下:
代码如下:
<template>
<div>
<div class="time">{{ timeText }}</div>
</div>
</template>
JS部分:
data() {
return {
timeText: '' // 时间显示
}
},
created() {
// 初始化时间
this.timeText = this.formatDate(new Date())
},
mounted() {
this.timeStart() // 开始时间计时
},
methods:{
timeStart() {
// 设置定时器
this.timer = setInterval(() => {
this.timeText = this.formatDate(new Date())
}, 1000)
},
// 格式化时间
formatDate(date) {
// 格式化时间为 YYYY-MM-DD HH:MM:SS
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hours = date.getHours()
var minutes = date.getMinutes()
var seconds = date.getSeconds()
// 判断是不是小于10 返回01 02 03
function check(num) {
if (num < 10) {
// 如果数字小于10,前边拼接个0
return '0' + num
} else {
return num
}
}
// 时间展示
return `
${check(year)}-
${check(month)}-
${check(day)}
${check(hours)}:
${check(minutes)}:
${check(seconds)}`
}
}