Vue— 获取当前时间并实时刷新
【前言】获取当前系统时间,并在页面上显示并实时刷新,和系统时间保持一致。【内容】1、在data中声明变量data() {return {nowDate: null, //存放年月日变量nowTime: null, //存放时分秒变量timer: "", //定义一个定时器的变量currentTime: new Date(), // 获取当前时间}}2、定义获取时间的方法getTime,并在crea
·
【前言】
获取当前系统时间,并在页面上显示并实时刷新,和系统时间保持一致。
【内容】
1、在data中声明变量
data() {
return {
nowDate: null, //存放年月日变量
nowTime: null, //存放时分秒变量
timer: "", //定义一个定时器的变量
currentTime: new Date(), // 获取当前时间
}
}
2、定义获取时间的方法getTime,并在created()声明周期里面调用,在实例创建前调用
created()
{
this.timer = setInterval(this.getTime, 1000);
}
3、具体方法如下:
methods: {
getTime(){
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour= date.getHours();
const minute = date.getMinutes();
const second = date.getSeconds();
const str = ''
if(this.hour>12) {
this.hour -= 12;
this.str = " PM";
}else{
this.str = " AM";
}
this.month=check(month);
this.day=check(day);
this.hour=check(hour);
this.minute=check(minute);
this.second=check(second);
function check(i){
const num = (i<10)?("0"+i) : i;
return num;
}
let week = new Date(date).getDay()
let weeks = ['日', '一', '二', '三', '四', '五', '六']
let getWeek = '星期' + weeks[week]
this.nowDate = year + '年' + this.month + '月' + this.day + '日' + getWeek
this.nowDate = year + "年" + this.month + "月" + this.day+"日";
this.nowTime = this.hour + ":" + this.minute + ":" + this.second + this.str;
},
}
4、离开页面使用beforeDestroy() 销毁
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer); // 在Vue实例销毁前,清除定时器
}
}
5、在页面需要显示的地方绑定{{ nowDate }},{{ nowTime }}即可
————————————————
版权声明:本文为CSDN博主「冯瑞姣」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/frj0260/article/details/109485591
更多推荐
已为社区贡献1条内容
所有评论(0)