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

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.dtcms.com/a/76227.html

相关文章:

  • 解决 ECharts 切换图表时的 Resize 问题
  • STL---set常用函数
  • c语言笔记 结构体基础
  • QT QML实现音频波形图进度条,可点击定位或拖动进度
  • 单目3d detection算法记录
  • 24集《不负美食不负卿》联合出品制作签约仪式成功举行
  • 【运维自动化-标准运维】如何实现一个最简单的流程编排
  • 【Redis】Redis的数据删除(过期)策略,数据淘汰策略。
  • [Nowruz 1404] 2025 Crypto/PWN部分
  • 三月九次前端面试复盘:当场景题成为通关密钥
  • 使用 EchoAPI 实现 API 断言的全面指南
  • vulhub/Billu_b0x靶机----练习攻略
  • c盘清理宝藏小工具
  • 使用Trainer传入自定义的compute_metrics函数时,oom报错
  • Diffusion Transformers (DiTs) - 用Transformer革新Diffusion模型
  • 构建高可靠NFS存储:自动化挂载保障机制的设计与优势
  • 【Vuex:在带命名空间的模块内访问全局内容】
  • Docker运行postgreSQL,由于异常启动或者退出后,提示could not locate a valid checkpoint record
  • JS—事件委托:3分钟掌握事件委托
  • vlan初学的总结
  • NLP高频面试题(四)——BN和LN的区别与联系,为什么attention要用LN
  • Visual Studio2022 中的键盘注释快捷方式
  • 多线程(四)----线程安全
  • 力扣刷题994. 腐烂的橘子
  • 比特币牛市还在不在
  • 「Wi-Fi学习」节能模式
  • Java常用类
  • Android第四次面试总结(基础算法篇)
  • LeetCode-274.H 指数
  • C#进阶(多线程相关)