vue中的定时函数(vue计时器的实现方法)
类别:编程学习 浏览量:748
时间:2021-10-20 08:24:07 vue中的定时函数
vue计时器的实现方法本文实例为大家分享了vue实现计时器的具体代码,供大家参考,具体内容如下
这里做的是点击按钮开始与结束倒计时的功能
<li class="time" v-if="rptType">{{str}}</li> <li class="receipt" :class="rptType?'jdz':'jiedan'" @click="receipt">开始</li>
data(){ return{ rptType: false,//状态 h:0,//定义时,分,秒,毫秒并初始化为0; m:0, ms:0, s:0, time:0, str:'', } }, mounted:function(){ this.$nextTick(function () {//整个视图都渲染完毕 }) }, methods:{ getTask: function(e){ this.taskType = e; }, //开始 receipt: function() { this.rptType = !this.rptType; if(this.rptType){ this.time=setInterval(this.timer,50); }else{ this.reset() } }, timer: function(){ //定义计时函数 this.ms=this.ms+50; //毫秒 if(this.ms>=1000){ this.ms=0; this.s=this.s+1; //秒 } if(this.s>=60){ this.s=0; this.m=this.m+1; //分钟 } if(this.m>=60){ this.m=0; this.h=this.h+1; //小时 } this.str =this.toDub(this.h)+":"+this.toDub(this.m)+":"+this.toDub(this.s)+""/*+this.toDubms(this.ms)+"毫秒"*/; // document.getElementById('mytime').innerHTML=h+"时"+m+"分"+s+"秒"+ms+"毫秒"; }, toDub: function(n){ //补0操作 if(n<10){ return "0"+n; } else { return ""+n; } }, reset: function(){ //重置 clearInterval(this.time); this.h=0; this.m=0; this.ms=0; this.s=0; this.str="00:00:00"; }, }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue做个人页面(vue简易记事本开发详解)
- vue引用js库报错(Vue插件报错:Vue.js is detected on this page.问题解决)
- vue组件之间的通信(超详细的vue组件间通信总结)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- vue定时器中间变颜色(Vue如何优雅的清除定时器)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- springboot如何解析vue登录参数(SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- 使用vue组件开发项目(Vue记事本实例详解)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- vue 选中背景高亮(vue 如何设置背景颜色及透明度)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
- 小米音乐与 QQ 音乐合作,便捷迁移会员(小米音乐与QQ音乐合作)
- 小米推出米兔儿童电话手表奥特曼版,799 元,支持微信 QQ(小米推出米兔儿童电话手表奥特曼版)
- 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩(贾怀胤唱白龙马)
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
热门推荐
- 网站数据迁移到新服务器(网站服务器迁移数据需要注意什么?)
- python核心编程和python基础教程(从0开始的Python学习014面向对象编程推荐)
- mysql为什么用decimal类型(MySQL decimal unsigned更新负数转化为0)
- php运行模式图解(php策略模式简单示例分析区别于工厂模式)
- python外部如何调嵌套函数(python中嵌套函数的实操步骤)
- mysql数据库导入错误怎么处理(MySQL数据库导入导出数据之报错解答实例讲解)
- typescript怎么加号(Typescript中的as、问号与感叹号详解)
- laravel api接口开发版本控制(Laravel 创建可以传递参数 Console服务的例子)
- ftp服务器资源共享(免费ftp服务器地址大全)
- sqlserver 插入数据的触发器(SQL server 表数据改变触发发送邮件的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9