Vue3 实时显示时间

记录一下代码,方便以后使用

参考的文章链接

  • 做了以下修改
    1. 修改了formateDate方法中传入参数这个不合理的地方
    2. 给定时器增加了间隔时间
    3. 增加了取消定时器的方法
<!-- template中的代码 -->
<span>当前时间:{{ nowTime }}</span>
// script 中的代码
import { ref, onMounted, onBeforeUnmount } from 'vue'
/*** 显示实时时间*/const nowTime = ref('')
/*** 将小于10的数字前面补0* @function* @param {number} value* @returns {string} 返回补0后的字符串*/
const complement = (value: number): string => {return value < 10 ? `0${value}` : value.toString()
}
/*** 格式化时间为XXXX年XX月XX日XX时XX分XX秒* @function* @returns {string} 返回格式化后的时间*/
const formateDate = () => {const time = new Date()const year = time.getFullYear()const month = complement(time.getMonth() + 1)const day = complement(time.getDate())const hour = complement(time.getHours())const minute = complement(time.getMinutes())const second = complement(time.getSeconds())const week = '星期' + '日一二三四五六'.charAt(time.getDay());return `${year}${month}${day}${hour}:${minute}:${second}`
}
let timer = 0
/*** 设置定时器*/
onMounted(() => {timer = setInterval(() => {nowTime.value = formateDate()}, 1000)
})
/*** 取消定时器*/
onBeforeUnmount(() => {clearInterval(timer) //清除定时器timer = 0
})
// 结果
当前时间:2024011221:34:48

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/616593.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java浮点数精度问题与BigDecimal详解

第1章&#xff1a;引言 大家好&#xff0c;我是小黑&#xff0c;咱们在日常的Java编程中&#xff0c;经常会遇到处理金融数据的情况&#xff0c;比如计算商品的价格或者处理用户的账户余额。在这些场景下&#xff0c;精确的数值计算就显得尤为重要。这时候&#xff0c;BigDeci…

【SPDK】【NoF】使用SPDK实现NVMe over Fabrics Target

本文使用两台PC&#xff0c;一台做NVMe over Fabrics Target&#xff08;服务端&#xff09;&#xff0c;一台做NVMe over Fabrics initiator&#xff08;客户端&#xff09;。首先使用SoftRoCE来实现底层的rdma传输&#xff0c;然后使用SPDK来实现NVMe over Fabrics Target。 …

内存卡为什么会提示格式化,内存卡提示格式化还能恢复吗

对于许多电脑用户来说&#xff0c;执行内存卡格式化操作导致数据丢失是一个常见的问题。在日常生活中&#xff0c;数据丢失的情况并不少见&#xff0c;但内存卡格式化后的数据恢复相对较难。目前&#xff0c;能够使用的方法较少&#xff0c;且成功率较低&#xff0c;但并不是没…

全网快递查询工具:批量查询,提升工作效率的利器

在快递行业日新月异的今天&#xff0c;高效、准确的快递信息管理显得尤为重要。固乔快递查询助手正是一款专为快递网点设计的实用工具&#xff0c;它可以帮助您快速、批量查询全网快递单号&#xff0c;为您的网点运营带来诸多便利。 一、固乔快递查询助手的用途 批量查询&…

java: 5-3 for循环

文章目录 1. for1.1 基本语法1.2 练习1.3 执行流程1.4 细节1.5 编程思想 (练习) 【老韩b站视频笔记p121-p125】 1. for 让你的代码可以循环执行。 1.1 基本语法 for 关键字&#xff0c;表示循环控制。for 有四要素: (1)循环的初始变量。 (2)循环的条件&#xff08;变量条件&…

代码随想录算法训练营第25天 | 216.组合总和III 17.电话号码的字母组合

目录 216.组合总和III &#x1f4a1;解题思路 回溯三部曲 &#x1f4bb;实现代码 17.电话号码的字母组合 &#x1f4a1;解题思路 # 数字和字母如何映射 # 回溯法来解决n个for循环的问题 &#x1f4bb;实现代码 216.组合总和III 题目链接&#xff1a;216.组合总和III …

#Uniapp:upx 和 rpx使用区分 设计稿计算规则

upx 和 rpx 区别 upx&#xff1a; upx是uni-app中的长度单位&#xff0c;它代表设备独立像素&#xff08;与屏幕密度无关&#xff09;&#xff0c;1upx等于设备上的1个物理像素。在不同分辨率和屏幕尺寸的设备上&#xff0c;upx会自动转换为适应当前屏幕的最佳物理像素值&…

百家大吉·夕阳关爱——昌岗街微型养老博览会

居民热情参与博览会 为让长者了解及选择适合自己的养老服务&#xff0c;昌岗街在2023年12月27日开展以“百家大吉夕阳关爱”为主题的昌岗街微型养老服务公益博览会活动&#xff0c;通过搭建养老服务机构供需服务平台&#xff0c;拓宽社区长者了解正规养老服务机构的渠道&#…

仿真验证方法(1)——动态验证

一、概述 1.1 验证的目的和方法 在现代集成电路设计中&#xff0c;验证所占工作量超过70%。验证要求真实而完备&#xff0c;它决定了设计的成败与成本。 验证的目的 原始描述是否正确&#xff1f;&#xff08;代码&#xff09; 逻辑功能是否正确&#xff1f;&#xff08;功能…

OpenGl 19高级GLSL

一.GLSL的内建变量 在着色器中&#xff0c;需要当前着色器以外地方的数据的话&#xff0c;必须把数据传进来。之前我们是通过uniform类型和采样器来完成的。之外&#xff0c;GLSL还支持另外几个以gl为前缀的变量&#xff0c;提供更多读写数据的方式&#xff0c;比如说顶点着色…

gitlab-ee 13.x->14.x->15.x->16.x升级踩坑记

安装-升级 升级时需要打开如下网址规划路径&#xff1a; https://gitlab-com.gitlab.io/support/toolbox/upgrade-path/?current13.3.9&distrocentos&autotrue 导入gitlab官方软件仓库 curl https://packages.gitlab.com/install/repositories/gitlab/gitlab-ee/scri…

C语言操作符详解与进制

目录 一&#xff1a;操作符的分类 二&#xff1a;二进制和进制转换 2.1 2进制转10进制 2.1.1 10进制转2进制数字 2.2 2进制转8进制和16进制 2.2.1 2进制转8进制 2.2.2 2进制转16进制 三&#xff1a; 原码、反码、补码 四&#xff1a;移位操作符 4.1左移操作符 4.2 右…

C语言指针(一)

目录 1.什么是指针 2.指针变量和地址 1.解引用操作符 2.指针变量类型的意义 3.void*指针 4.const修饰指针 1.const放在*左边 2.const放在*右边 3.指针的运算 1.指针加减整数 2.指针减指针 3.指针比较大小 4.野指针 1.没有给指针变量初始化 2.指针指向的空间释放 …

XSS的利用(包含:蓝莲花、beef-xss)

0x00、环境搭建 dvwa靶场 操作指南和最佳实践:使用 DVWA 了解如何防止网站漏洞_dvwa源代码-CSDN博客 xss漏洞接收平台 下载:GitHub - firesunCN/BlueLotus_XSSReceiver 将解压后的BlueLotus_XSSReceiver原代码放置 phpstudy 安装目录的WWW文件夹下 访问平台:http://127…

力扣刷题记录(28)LeetCode:797、200、463

797. 所有可能的路径 解题思路&#xff1a;回溯算法&#xff0c;当收集到的路径的最后一个值等于n-1时&#xff0c;收集答案。 参数&#xff1a;图、当前结点 class Solution { public:vector<int> path;vector<vector<int>> ans;void dfs(vector<vector…

企业培训系统源码:构建智能、可扩展的学习平台

企业培训系统在现代企业中扮演着至关重要的角色。本文将通过深度解析企业培训系统的源码&#xff0c;介绍如何构建一个智能、可扩展的学习平台&#xff0c;涉及关键技术和代码实例。 1. 技术栈选择与项目初始化 在构建企业培训系统之前&#xff0c;选择适当的技术栈是至关重…

Spark中Rdd算子和Action算子--学习笔记

RDD算子 filter """ rdd.filter(f):根据f函数中的判断条件对rdd追踪的数据进行过滤 保留条件为True对应的rdd数据 """ from pyspark import SparkContextsc = SparkContext()rdd1 = sc.parallelize([1,2,3,4]) rdd2 = sc.parallelize([a,b,c])…

umi + monorepo实践

为何需要monorepo&#xff1f; 项目背景 目前负责的企微端的应用有三个&#xff1a; 策略分享&#xff1a;手机端、PC端使用单向视频审核&#xff1a;PC端使用资配报告&#xff1a;手机端使用 三个项目的相同点&#xff1a; 后端接口域名相同企微的JS-SDK配置基本相同希望…

Linux操作系统----实用工具Git(配实操图)

绪论​ “针对问题 解决问题 针对问题&#xff01;”&#xff0c;本章主要讲解的是Git是什么以及Git的如何搭建仓库和如何在Linux环境下通过指令的形式提交自己的代码到远程仓库。 话不多说安全带系好&#xff0c;发车啦&#xff08;建议电脑观看&#xff09;。 1.Git的来源以…

Java编程思想3

文章目录 一、访问权限控制1. 目的2. 访问权限修饰符&#xff1a;3.私有构造器 二、复用类1. 组合&#xff08;Composition&#xff09;&#xff1a;2. 继承&#xff08;Inheritance&#xff09;&#xff1a;3. 基类的初始化&#xff1a;4. 在组合与继承之间选择&#xff1a;使…