Vue实现时钟
采用定时器来获取最新的时间,通过Date的方法获取年份、月份、日期、星期以及当前时间,用来拼装时钟,然后使用生命周期函数create来创建定时器,是时钟每隔一秒钟发生一次变化,达到时钟在走的效果,同时在beforeDestroy函数中清除定时器toTimeString() 方法可把 Date 对象的时间部分转换为字符串,并返回结果。const days = ['天', '一', '二', '三',
·
采用定时器来获取最新的时间,通过Date的方法获取年份、月份、日期、星期以及当前时间,用来拼装时钟,然后使用生命周期函数create来创建定时器,是时钟每隔一秒钟发生一次变化,达到时钟在走的效果,同时在beforeDestroy函数中清除定时器
toTimeString() 方法可把 Date 对象的时间部分转换为字符串,并返回结果。
const days = ['天', '一', '二', '三', '四', '五', '六']; // 星期数组
let icnow = new Date(); // 初始化时间
let interval; // 定义全局定时器,用于清除定时器
export default {
name: 'app',
data() {
return {
year: icnow.getFullYear(),
month: icnow.getMonth() + 1,
date: icnow.getDate(),
day: days[icnow.getDay() - 1],
time: icnow.toTimeString().substring(0, 8)
}
},
created () {
interval = setInterval(() =>{
let icnow = new Date();
this.year = icnow.getFullYear();
this.month = icnow.getMonth() + 1;
this.date = icnow.getDate();
this.day = days[icnow.getDay()];
this.time = icnow.toTimeString().substring(0, 8);
}, 1000)
},
computed: {
// 当前时间
newTime: function () {
return this.year + '年' + this.month + '月' + this.date + '日 星期' + this.day + ' ' + this.time;
}
},
beforeDestroy () {
clearInterval(interval);
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)