Vue—获取当前时间并实时刷新

【前言】

获取当前系统时间,并在页面上显示并实时刷新,和系统时间保持一致。

【内容】

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;
            }
            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 }}即可

  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值