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

Vue 正计时器组件

工作中遇到了一个时间正计时的功能。
另外涉及到有Vue父组件调用子组件中的data和method,作为记录。
下面贴代码~

HTML部分

<template><div class="timer"><div ref="startTimer">00:00:00</div></div>
</template>

JS部分


<script>
export default {name:'Timer',props:{time:{type:Number}},data() {return {timer: "",hour: 0,minutes: 0,seconds: 0,cr: ''}},created() {this.timer = setInterval(this.startTimer, 1000);},methods: {startTimer() {this.seconds += 1;if (this.seconds >= 60) {this.seconds = 0;this.minutes = this.minutes + 1;}if (this.minutes >= 60) {this.minutes = 0;this.hour = this.hour + 1;}this.$refs.startTimer.innerHTML = (this.hour < 10 ? '0' + this.hour: this.hour) + ':' + (this.minutes < 10 ? '0' + this.minutes: this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds: this.seconds);this.cr =  this.seconds},stop () {clearInterval(this.timer)},start () {this.timer = setInterval(this.startTimer, 1000)}}
}
</script>

这里通过props把父组件的方法传递给子组件

这里我们在子组件中定义

<Time :time="time" ref="headerChild"></Time>

我要调用父组件中的start()的方法以及参数,方法如下

this.$refs.headerChild.stop()
this.$refs.headerChild.seconds

注:子组件中统计时分秒总合

var timeHour = this.$refs.headerChild.hour
var timeMinutes = this.$refs.headerChild.minutes
var timeSeconds = this.$refs.headerChild.seconds
var totalTime = timeHour * 3600 + timeMinutes * 60 + timeSeconds

相关文章:

Vue 正计时器组件

工作中遇到了一个时间正计时的功能。 另外涉及到有Vue父组件调用子组件中的data和method,作为记录。 下面贴代码~ HTML部分 <template><div class"timer"><div ref"startTimer">00:00:00</div></div> </template>JS…...

神仙打架!谷歌和OpenAI竞相推出多模式AI

原创 | 文 BFT机器人 随着秋季的到来&#xff0c;科技界正在展开另一场季节性活动——科技巨头谷歌和OpenAI正在竞相发布下一代多模态大语言模型&#xff0c;这些高级模型能够解释图像和文本&#xff0c;使他们能够执行诸如从草图生成网站代码或以文本形式描述视觉图表等任务。…...

MySQL 字符集

文章目录 1.简介2.支持的字符集3.字符集级别4.数据库字符集5.数据表字符集6.表字段字符集7.字符串常量字符集8.客户端字符集参考文献 1.简介 MySQL 支持多种字符集&#xff0c;使您能够使用各种字符集存储数据&#xff0c;并根据给定排序规则执行比较。 MySQL 服务器默认字符…...

java生成PDF的Util

java使用itext生成pdf-CSDN博客 接上文 支持绘制表格 支持表格中的文本 字体加粗、字体上色、单元格背景上色&#xff0c; 支持拼接文本 支持单行文本 多种背景颜色、字体上色 支持自定义水印 废话不说先上效果图 工具类代码 package com.zxw.文件.PDF.util;import com.…...

【openwrt学习笔记】新patch的制作和旧patch的修改

目录 一、参考资料二、使用QUILT工具添加补丁2.1 添加一个新的补丁2.2 编辑一个已存在的补丁2.3 补丁命名规范2.4 添加或修改内核补丁文件 三、使用diff 打补丁四、相关问题及解决方法4.1 make package/package-name/update Vs失败 一、参考资料 Working with patches 二、使…...

【GIT】Git clone https://xxx.git 报错仓库找不到,ssh却可以。

环境 MacBook Pro&#xff1a;13.0 (22A380)&#xff0c;Intel。 Python&#xff1a;3.10.9 序言 最近在Mac电脑中按照stable diffusion webUI 时&#xff0c;总是报&#xff1a; MacBook-Pro:openai yutao$ git clone https://github.com/AUTOMATIC1111/stable-diffusion-…...

Vue系列(三)之 基础语法下篇【事件处理,表单综合案例,组件通信】

一. 事件处理 在 Vue.js 中&#xff0c;v-on 指令被用于监听 DOM 事件&#xff0c;并在事件触发时执行相应的方法&#xff0c;这些方法就是事件处理器。v-on 指令有简写形式 &#xff0c;例如 click"handleClick" 会监听点击事件并执行 handleClick 方法。 事件处理…...

AI 编码助手 Codewhisperer 安装步骤和使用初体验

文章作者&#xff1a;为了自己加油 最近亚⻢逊云科技推出了一款基于机器学习的AI编程助手 Amazon Code Whisperer&#xff0c;可以实时提供代码建议。在编写代码时&#xff0c;它会自动根据现有的代码和注释给出建议。Amazon Code Whisperer与 GitHub Copilot 类似&#xff0c;…...

Python操作Elasticsearch

一、Python操作ES之基本使用 安装:pip3 install elasticsearch from elasticsearch import Elasticsearchobj = Elasticsearch() # 创建索引(Index) # result = obj.indices.create(index=user,ignore=400) # # print(result)# print(result) # 删除索引 # result = obj.i…...

面试打底稿② 专业技能的第二部分

简历原文 抽查部分 比较熟悉Nacos、Feign、SpringCloud Gateway等微服务的使用&#xff0c;有实际上手项目使用的经验&#xff1b;基本掌握Linux常用命令&#xff0c;了解Linux系统管理、网络管理、生产环境等必用服务&#xff0c;了解Docker的使用&#xff0c;在博客中多有关…...

java 对mybatis拦截Interceptor进行权限控制(条件修改),入参修改,返回修改

使用jsqlparser对sql解析拼装 基础准备 <dependency><groupId>com.github.jsqlparser</groupId><artifactId>jsqlparser</artifactId><version>4.5</version><scope>compile</scope> </dependency> <depende…...

鲲鹏+麒麟v10 sp1 打包tomcat

一、安装打包软件 yum install rpm-build yum install rpmdevtools 二、复制tar包 注意&#xff1a;如果要修改配置文件需要把tar包解压&#xff0c;修改tomcat配置文件 cp apache-tomcat-8.5.93.tar.gz /root/rpm-build/SOURCES 三、编辑/root/rpm-build/SOURCES/tomcat.…...

大屏大概是怎么个开发法(前端)

写在前面&#xff0c;博主是个在北京打拼的码农&#xff0c;从事前端工作5年了&#xff0c;做过十多个大大小小不同类型的项目&#xff0c;最近心血来潮在这儿写点东西&#xff0c;欢迎大家多多指教。 对于文章中出现的任何错误请大家批评指出&#xff0c;一定及时修改。有任何…...

什么是Selenium?使用Selenium进行自动化测试!

你知道什么是 Selenium 吗&#xff1f;你知道为什么要使用它吗&#xff1f;答案就在本文中&#xff0c;很高兴能够与你共飧。 自动化测试正席卷全球&#xff0c;Selenium 认证是业界最抢手的技能之一。 什么是 Selenium&#xff1f; Selenium 是一种开源工具&#xff0c;用于…...

第一章:最新版零基础学习 PYTHON 教程(第十七节 - Python 表达式语句–Python返回语句)

return 语句用于结束函数调用的执行,并将结果(return 关键字后面的表达式的值)“返回”给调用者。return 语句之后的语句不被执行。如果return语句没有任何表达式,则返回特殊值None。return 语句总体上用于调用函数,以便可以执行传递的语句。 注意: Return 语句不能在函数…...

前端碎知识点

1 统计字符串中每个字符出现的频率 const str fgasdfadfdasd;const result str.split().reduce((a, b) > {if (a[b]) {a[b];} else {a[b] 1;}return a; }, {});const resultNew str.split().reduce((a, b) > {// undefined&#xff0c;就是NaNa[b] || (a[b] 1);ret…...

【Leetcode Sheet】Weekly Practice 7

Leetcode Test 1462 课程表Ⅳ(9.12) 你总共需要上 numCourses 门课&#xff0c;课程编号依次为 0 到 numCourses-1 。你会得到一个数组 prerequisite &#xff0c;其中 prerequisites[i] [ai, bi] 表示如果你想选 bi 课程&#xff0c;你 必须 先选 ai 课程。 有的课会有直接…...

leetcode Top100(23)回文链表

给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true采用动态数组&#xff0c;判断数组对称就可以了&#xff08;这解法空间…...

WebGL绘制圆形的点

目录 前言 如何实现圆形的点&#xff1f; 片元着色器内置变量&#xff08;gl_FragCoord、gl_PointCoord&#xff09; gl_PointCoord的含义 示例程序&#xff08;RoundedPoint.js&#xff09; 代码详解 前言 本文将讨论示例程序RoundedPoint&#xff0c;该程序绘制了圆…...

《The Rise and Potential of Large Language Model Based Agents: A Survey》全文翻译

The Rise and Potential of Large Language Model Based Agents: A Surve - 基于 LLMs 的代理的兴起和潜力&#xff1a;一项调查 论文信息摘要1. 介绍2. 背景2.1 AI 代理的起源2.2 代理研究的技术趋势2.3 为什么大语言模型适合作为代理大脑的主要组件 论文信息 题目&#xff1…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...