封装函数----
methods:{
//获取当前时间
getDate(){
let that = this
this.timer=setInterval(function(){
let dt = new Date();
let days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
let y = dt.getFullYear();
let mt = dt.getMonth() + 1;
let day = dt.getDate();
let week = days[dt.getDay()];
let h = dt.getHours();
let m = dt.getMinutes()>=10?dt.getMinutes():('0'+dt.getMinutes());
let s = dt.getSeconds()>=10?dt.getSeconds():('0'+dt.getSeconds());
that.nowTime = y + "年" + mt + "月" + day + "日" +week ;
that.hms=h + ":" + m + ":" + s
},1000)
}
}
页面进入即调此函数
created(){
this.getDate()
}
离开页面前销毁定时器
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); // 在Vue实例销毁前,清除我们的定时器
}
}
html部分-----
<div id="nowDate">
<span style="margin-right: 10px;">{{nowTime}}</span>
<span >{{hms}}</span>
</div>
显示效果-----
根据项目需求,在getDate中自定义时间格式
补充-----
单独封装工具类函数,如在vue中使用
src/utils/index.js
export function dateFormat(date, newDate) {
let dt = date;
let days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
let y = dt.getFullYear();
let mt = (dt.getMonth() + 1) >= 10 ? (dt.getMonth() + 1) : ('0' + (dt.getMonth() + 1));
let day = dt.getDate() >= 10 ? dt.getDate() : ('0' + dt.getDate());
let week = days[dt.getDay()];
let h = dt.getHours() >= 10 ? dt.getHours() : ('0' + dt.getHours());
let m = dt.getMinutes() >= 10 ? dt.getMinutes() : ('0' + dt.getMinutes());
let s = dt.getSeconds() >= 10 ? dt.getSeconds() : ('0' + dt.getSeconds());
let outDate = `${y}-${mt}-${day} ${h}:${m}:${s}`
newDate = outDate
return newDate
}
页面文件引入
import { dateFormat } from ‘@/utils’
调用
// 时间变化
timeChange (e) {
console.log('选择的时间')
console.log(e)
console.log('处理后的时间')
let newDate = ''
console.log(dateFormat(e, newDate ))
}
搬运vue-admin-element上的源码
export function parseTime(time, cFormat) {
if (arguments.length === 0) {
return null
}
const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
let date
if (typeof time === 'object') {
date = time
} else {
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
time = parseInt(time)
}
if ((typeof time === 'number') && (time.toString().length === 10)) {
time = time * 1000
}
date = new Date(time)
}
const formatObj = {
y: date.getFullYear(),
m: date.getMonth() + 1,
d: date.getDate(),
h: date.getHours(),
i: date.getMinutes(),
s: date.getSeconds(),
a: date.getDay()
}
const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
const value = formatObj[key]
// Note: getDay() returns 0 on Sunday
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value ] }
return value.toString().padStart(2, '0')
})
return time_str
}
格式化时间转换成时间戳
new Date().getTime() //当天时间戳
new Date('2020-03-09').getTime() //某天时间戳