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开发之moment的介绍与使用)
- vue应用转flutter(Vue和Flask通信的实现)
- vue文件上传进度处理(Vue 大文件上传和断点续传的实现)
- vue子视图里再加routerview(vue router-view的嵌套显示实现)
- vuevlog制作软件(Vue实现Dialog封装)
- vue怎么使用element(Vue Element前端应用开发之图标的维护和使用)
- vue弹窗模板(Vue登录页面的动态粒子背景插件实现)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue设置div大小(Vue实现div滚轮放大缩小)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue引入axios(vue封装axios的几种方法)
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- 按这几方面养护佛肚竹盆景,保证枝叶繁茂,造型优美(按这几方面养护佛肚竹盆景)
- 冰岛旅游攻略(冰岛旅游攻略及花费八日游)
- 寒假旅游攻略(成都寒假旅游攻略)
- 菲律宾旅游攻略(菲律宾旅游攻略地图)
- 清华大学难考吗(清华大学考研录取分数线)
- 观花盆栽佛肚竹盆景制作及养护(观花盆栽佛肚竹盆景制作及养护)
热门推荐
- dedecms数据负载能力(详解织梦dedecms标签{dede:flink /}用法)
- php服务器有哪些(php服务器的系统详解)
- vs和sql安装顺序(VS2015安装之后加装Sql server2014详细步骤)
- SQL中的@@Error的使用
- python加密与解密(python实现简单加密解密机制)
- laravel自定义命令(laravel中数据显示方法默认值和下拉option默认选中)
- 腾讯云查看ftp用户名密码(腾讯云服务器ftp连不上的解决办法)
- 服务器和云服务器有什么区别(云服务是什么,和云服务器有啥区别?)
- mysql的事务隔离级别怎么实现(mysql、oracle默认事务隔离级别的说明)
- php用什么解压(php解压缩zip和rar压缩包文件的方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9