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

news/2025/3/20 19:54:42/

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

【效果图】

【HTML】

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

【script】

javascript">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开始,需加1const 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.ppmy.cn/news/1580665.html

相关文章

前端小食堂 | Day18 - 身份认证の八卦阵

&#x1f510; 今日秘术&#xff1a;JWT/OAuth2 攻防奥义 1. JWT 安全の六合阵法 // &#x1f6ab; 危险操作&#xff1a;未验证签名 const decodeUnsafe (token) > JSON.parse(atob(token.split(.)[1])); // ✅ 安全姿势一&#xff1a;严格签名验证 import jwt fro…

idea2024创建maven web项目

1、file->new->project->MavenArchetype&#xff0c;在右侧“Archetype”处选择 “org.apache.maven.archetypes:maven-archetype-webapp”&#xff0c;点击“create”创建项目。 2、配置tomcat&#xff0c;如下图所示&#xff1a; 设置上下文路径后&#xff0…

三分钟掌握视频分辨率修改 | 在 Rust 中优雅地使用 FFmpeg

前言 在视频处理领域&#xff0c;调整视频分辨率是一个绕不过去的需求。比如&#xff0c;你可能需要将一段视频适配到手机、平板或大屏电视上&#xff0c;或者为了节省存储空间和网络带宽而压缩视频尺寸。然而&#xff0c;传统的FFmpeg命令行工具虽然功能强大&#xff0c;但复…

轻量级模块化前端框架:快速构建强大的Web界面

轻量级模块化前端框架&#xff1a;快速构建强大的Web界面 在当今快节奏的Web开发环境中&#xff0c;选择一个高效且灵活的前端框架至关重要。UIkit 是一个轻量级的模块化前端框架&#xff0c;旨在帮助开发者快速构建功能强大且响应迅速的Web界面。 UIkit提供了丰富的组件和工…

Redis——事务实现以及应用场景

本文介绍Redis事务相关的原理以及知识点&#xff0c;从redis的常用命令出发&#xff0c;深入理解redis在日常工作中的实际场景使用用法。 本文目录 一、Redis事务简介二、事务相关命令三、事务应用场景 一、Redis事务简介 Redis 事务本质上是一个命令队列。用户可以使用MULTI命…

Sequential Thinking:AI时代的“项目管理革命“——重新定义人类与AI的协作范式

一、从"混沌指令"到"结构化智慧"的跨越 2025年2月&#xff0c;GitHub Copilot Labs发布的最新数据显示&#xff0c;使用Sequential Thinking工具的开发者团队&#xff0c;项目延期率下降67%&#xff0c;需求变更响应速度提升3.2倍。这场悄然发生的效率革命…

TimeGAN:开启时间序列生成新纪元,结合GAN与自回归模型的优势

今天周末&#xff0c;给大家介绍一篇时序数据生成网络TimeGAN&#xff0c;一种用于时间序列生成的新框架&#xff0c;它将无监督GAN方法的多功能性与有监督自回归模型对条件时间动态的控制相结合。通过利用有监督损失和联合训练的嵌入网络&#xff0c;TimeGAN在生成逼真的时间序…

算法刷题记录——LeetCode篇(2) [第101~200题](持续更新)

(优先整理热门100及面试150&#xff0c;不定期持续更新&#xff0c;欢迎关注) 101. 对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&am…