当前位置: 首页 > article >正文

vue 获取当前时间并自动刷新

新增需求,需要在大屏的右上角展示当前时间,并实时按秒刷新,通过通义千问搜索关键js代码后,整理出如下代码。

【效果图】

【HTML】

<div class="time-wrap">
  {{ formattedDateTime }}
  <span> {{ weekTime }}</span>
</div>

【script】

data() {
  return {
    formattedDateTime: '',
    weekTime: '',
  }
},

mounted() {

  // 在组件挂载后立即更新时间显示
  this.getFormattedDateTime();

  // 设置定时器,每秒更新一次时间显示
  setInterval(() => {
    this.getFormattedDateTime();
  }, 1000);

},

methods: {

    // 时间展示
    getFormattedDateTime() {
      const now = new Date();

      // 获取年月日
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始,需加1
      const day = String(now.getDate()).padStart(2, '0');

      // 获取时分秒
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');

      // 星期几,数组下标0对应星期天
      const weekDays = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekDay = weekDays[now.getDay()];

      // 拼接字符串
      this.formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      this.weekTime = `${weekDay}`;
    }


}


http://www.kler.cn/a/591851.html

相关文章:

  • Spring 创建bean的流程
  • java项目40分钟后token失效问题排查(40分钟后刷新页面白屏)
  • 20242817李臻《Linux⾼级编程实践》第四周
  • [spring]集成junit
  • 在 Vue 项目中引入静态图片有多种方式
  • 从Excel到搭贝的转变过程
  • VSTO(C#)Excel开发13:实现定时器
  • 【模拟面试】计算机考研复试集训(第八天)
  • 免费看付费电影网站制作,高清电影集合搜索引擎网站
  • 【Json-RPC框架】:Json::CharReader,parse函数反序列化的返回值
  • sparksql的Transformation与 Action操作
  • Redis 小记
  • LeetCode[42] 接雨水
  • HarmonyOS开发,A持有B,B引用A的场景会不会导致内存泄漏,代码示例告诉你答案
  • Ext系列文件系统
  • 全网首创/纯Qt/C++实现国标GB28181服务/实时视频/云台控制/预置位/录像回放和下载/事件订阅/语音对讲
  • 飞腾2000+/64核加固服务器
  • ruoyi-vue部署
  • 虚幻基础:组件组件通信
  • PreparedStatement:Java 数据库操作的安全与高效之道