计时的vue写法

在这里插入图片描述

<el-input type="text" id="timetext" value="00时00分00秒" readonly></el-input>
<el-button type="button" @click="start()">开始</el-button> 
<el-button type="button" @click="stop()">暂停</el-button> 
<el-button type="button" @click="Reset()">重置</el-button>
hour: 0,
minute: 59,
second: 58,
int: null,
millisecond: 0,
//重置
Reset() {window.clearInterval(this.int);this.millisecond = this.hour = this.minute = 0;this.second = 58;document.getElementById("timetext").value = "00时00分00秒";
},//开始
start() {this.int = setInterval(this.timer, 1000);
},
//计时
timer() {this.second++;if (this.second >= 60) {this.second = 0;this.minute = this.minute + 1;}if (this.minute >= 60) {this.minute = 0;this.hour = this.hour + 1;}document.getElementById("timetext").value =this.hour + "时" + this.minute + "分" + this.second + "秒";
}

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

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

相关文章

el-input无法输入的问题和表单验证失败问题(亲测有效)-开发bug总结4

大部分无法输入的问题&#xff1a;基本都是没有进行v-model双向数据绑定&#xff0c;这个很好解决。 本人项目中遇到的bug问题如下&#xff1a; 点击添加&#xff0c;表单内可输入用户名 和 用户姓名&#xff0c;但有时会偶发出现无法这两个input框里面无法输入内容。 原因&a…

常见排序算法之冒泡排序

冒泡排序&#xff0c;英文名Bubble Sort&#xff0c;是一种相对基础的 交换排序方法。这种排序算法的名字来源于它操作的过程&#xff0c;可以类比为数列中的每一个元素都可以像小气泡一样&#xff0c;根据自身的大小一点一点向数组的一侧移动。具体到冒泡排序的工作原理&#…

开启生成式AI的探索之旅,亚马逊云科技分享生成式AI热门案例

现今&#xff0c;生成式AI为企业争先讨论的热门话题&#xff0c;上云出海为企业转型的重中之重。无论你是行业新贵还是中小企业&#xff0c;探索新的模式、创新迭代业务都是不容忽视的重点&#xff0c;下面就来介绍几个亚马逊云科技帮助企业创新的案例。 开启生成式AI的探索之旅…

02333软件工程串讲

完整笔记在语雀 https://www.yuque.com/huangzhanqi/nrt1l4/zoa0g0osnrmog0xdhttps://www.yuque.com/huangzhanqi/nrt1l4/zoa0g0osnrmog0xd 《软件工程》串讲讲义 应考指导 一、课程介绍 1、课程性质 《软件工程》是全国高等教育自学考试计算机及应用&#xff08;独立本科…

曼哈顿距离

曼哈顿距离 以7*7为例 在d<n/2时&#xff1a;打印的图案为菱形 例题&#xff1a; 输入奇数n&#xff0c;显示n行星塔。若输入5&#xff0c;则显示 #include<stdio.h> #include<math.h> int main() {int n, i, j, x, y;scanf("%d", &n);x y n …

Kubernetes速成课程:掌握容器编排的精髓

微服务演进方向 • 面向分布式设计(Distribution):容器、微服务、API 驱动的开发; • 面向配置设计(Configuration):⼀个镜像&#xff0c;多个环境配置; • 面向韧性设计(Resistancy):故障容忍和自愈; • 面向弹性设计(Elasticity):弹性扩展和对环境变化(负载)做出响应; •…

rust学习——操作字符串、字符串转义、操作UTF8-字符串 (操作中文字符串)

文章目录 操作字符串追加 (Push)插入 (Insert)替换 (Replace)1、replace2、replacen3、replace_range 删除 (Delete)1、 pop —— 删除并返回字符串的最后一个字符2、 remove —— 删除并返回字符串中指定位置的字符3、truncate —— 删除字符串中从指定位置开始到结尾的全部字…

【尘缘赠书活动:01期】Python数据挖掘——入门进阶与实用案例分析

引言 本案例将根据已收集到的电力数据&#xff0c;深度挖掘各电力设备的电流、电压和功率等情况&#xff0c;分析各电力设备的实际用电量&#xff0c;进而为电力公司制定电能能源策略提供一定的参考依据。更多详细内容请参考**《Python数据挖掘&#xff1a;入门进阶与实用案例…

CSS设置超出范围滚动条和滚动条样式

CSS设置超出范围滚动条和滚动条样式 效果展示 当块级内容区域超出块级元素范围的时候&#xff0c;就会以滚动条的形式展示&#xff0c;你可以滚动里面的内容&#xff0c;里面的内容不会超出块级区域范围。 未设置超出隐藏&#xff0c;显示滚动条 超出隐藏&#xff0c;显示滚动…

财报解读:双轮驱动下,香飘飘究竟能打开多大的获利空间?

2023年以来&#xff0c;食品饮料行业稳中求进&#xff0c;消费市场情绪逐步上扬。 数据显示&#xff0c;2023年上半年&#xff0c;食品饮料行业实现营收5338.86亿元&#xff0c;同比增长9.65%&#xff1b;归母净利润1125.03亿元&#xff0c;同比增长14.93%&#xff0c;营收和归…

开源博客项目Blog .NET Core源码学习(4:生成验证码)

开源博客项目Blog中的后台管理登录界面中支持输入验证码&#xff08;如下图所示&#xff09;&#xff0c;本文学习并记录项目中验证码的生成及调用方式。   博客项目中调用VerifyCode类生成验证码&#xff0c;该类位于App.Framwork项目中&#xff0c;命名空间为App.Framwork…

解析外贸开发信的结构?营销邮件书写技巧?

做外贸的开发信结构是怎样的&#xff1f;写外贸邮件的注意事项&#xff1f; 外贸开发信是国际贸易中至关重要的一环&#xff0c;它不仅是与潜在客户建立联系的第一步&#xff0c;也是一种有效的市场推广工具。蜂邮EDM将深入解析外贸开发信的结构&#xff0c;帮助您更好地理解如…

c语言进制的转换10进制转换16进制

c语言进制的转换10进制转换16进制 c语言的进制的转换 c语言进制的转换10进制转换16进制一、16进制的介绍二、10进制转换16进制的方法 一、16进制的介绍 十六进制&#xff1a; 十六进制逢十六进一&#xff0c;所有的数组是0到9和A到F组成&#xff0c;其中A代表10&#xff0c;B代…

简化通知基础设施:开源的消息通知服务 | 开源专题 No.41

novuhq/novu Stars: 22.9k License: MIT Novu 是一个开源的通知基础设施项目&#xff0c;它提供了统一的 API 来通过多个渠道发送通知&#xff0c;包括应用内、推送、电子邮件、短信和聊天。主要功能有&#xff1a; 为所有消息提供商 (应用内、电子邮件、短信、推送和聊天) 提…

Spring Boot和XXL-Job:高效定时任务管理

Spring Boot和XXL-Job&#xff1a;高效定时任务管理 前言第一&#xff1a;XXL-Job简介什么是XXL-job对比别的任务调度 第二&#xff1a; springboot整合XXL-job配置XXL-Job Admin拉取XXL-Job代码修改拉取的配置 配置执行器自己的项目如何整合maven依赖properties文件配置执行器…

使用jdbc技术连接数据库

连接数据库 <dependencies><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.28</version><scope>compile</scope></dependency> </dependencies> g…

教师必备宝藏,强烈推荐

亲爱的教师朋友们&#xff0c;你们是不是在为学期末成绩查询而头疼呢&#xff1f;一学期下来&#xff0c;成堆的试卷和成绩单&#xff0c;还有学生家长的各种咨询&#xff0c;让人应接不暇。现在&#xff0c;我给你们分享一个教师必备的宝藏&#xff0c;让你们的成绩查询工作变…

games101作业七,计算机图形学作业三,详细知识点总结(附代码)

计算机图形学课程作业总结&#xff0c;同课程慎重Ctrl C/V 文章目录 1. 光线追踪算法光线追踪的准备工作Mller-Trumbore算法rayTriangleIntersect()函数 2. 光线追踪包围盒加速算法1. AABB 包围盒又称 轴对齐包围盒2. 光线与包围盒&#xff08;AABB&#xff09;的相交检测算法3…

对GRUB和initramfs的小探究

竞赛时对操作系统启动过程产生了些疑问&#xff0c;于是问题导向地浅浅探究了下GRUB和initramfs相关机制&#xff0c;相关笔记先放在这里了。 内核启动流程 在传统的BIOS系统中&#xff0c;计算机具体的启动流程如下&#xff1a; 电源启动&#xff1a;当计算机的电源打开时&…

『heqingchun-Qt的艺术-优雅界面设计开发』

Qt的艺术-优雅界面设计开发 效果图 一、新建Qt窗口工程 二、准备资源文件 1.图标资源 链接: 图标资源 2.Qss资源 链接: Qss资源 三、设计开发 项目源码链接: CSDN资源