DDR爱好者之家

Vue 中获取当前时间并实时刷新的实现代码
站长资源 2024/12/27 佚名
34 1538
DDR爱好者之家 Design By 杰米

1. 实现代码

<template>
 <div>
  {{nowDate}}{{nowWeek}}{{nowTime}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   nowDate: "",  // 当前日期
   nowTime: "",  // 当前时间
   nowWeek: ""   // 当前星期
  }
 },
 methods:{
  dealWithTime(data) { // 获取当前时间
   let formatDateTime;
   let Y = data.getFullYear();
   let M = data.getMonth() + 1;
   let D = data.getDate();
   let H = data.getHours();
   let Min = data.getMinutes();
   let S = data.getSeconds();
   let W = data.getDay();
   H = H < 10 "0" + H : H;
   Min = Min < 10 "0" + Min : Min;
   S = S < 10 "0" + S : S;
   switch (W) {
    case 0:
     W = "日";
     break;
    case 1:
     W = "一";
     break;
    case 2:
     W = "二";
     break;
    case 3:
     W = "三";
     break;
    case 4:
     W = "四";
     break;
    case 5:
     W = "五";
     break;
    case 6:
     W = "六";
     break;
    default:
     break;
   }
   this.nowDate = Y + "年" + M + "月" + D + "日 ";
   this.nowWeek = "周" + W ; 
   this.nowTime = H + ":" + Min + ":" + S;
   // formatDateTime = Y + "年" + M + "月" + D + "日 " + " 周" +W + H + ":" + Min + ":" + S;
  },
 },
 mounted() { 
  // 页面加载完后显示当前时间
  this.dealWithTime(new Date())
  // 定时刷新时间
  this.timer = setInterval(()=> {
    this.dealWithTime(new Date()) // 修改数据date
  }, 500)
 }, 
 destroyed() {
  if (this.timer) { // 注意在vue实例销毁前，清除我们的定时器
   clearInterval(this.timer);
  }
 }
}
</script>

<style lang="scss" scope>

</style>

2. 实现效果

Vue 中获取当前时间并实时刷新的实现代码

总结

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米