vue计时器

╰半橙微兮° 2023-06-28 11:22 7阅读 0赞

![在这里插入图片描述][2020010910145318.png]  
这里做的是点击按钮开始与结束倒计时的功能

<div class="time" v-if="rptType">{
       {str}}</div>
    <div class="receipt" :class="rptType?'jdz':'jiedan'" @click="receipt">开始</div>

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";
    	},
    }

[2020010910145318.png]: https://img-blog.csdnimg.cn/2020010910145318.png

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue计时器

![在这里插入图片描述][2020010910145318.png] 这里做的是点击按钮开始与结束倒计时的功能 <div class="time" v-if="r

╰半橙微兮°/ 2023年06月28日 11:22/ 0 赞/ 7 阅读

相关 vue中如何清除计时器

vue中如何清除计时器今天第一次在vue中使用计时器发现直接给计时器起个名字就报错，导致清除不了，搞了好一会才解决了清除计时器办法 1、现在data中声明一个

ゝ一世哀愁。/ 2022年12月05日 10:25/ 0 赞/ 194 阅读

相关 Qt：计时器

`QObject`是所有Qt对象的基类，它提供Qt中的基本定时器支持。使用`QObject :: startTimer()`，您可以以毫秒为参数启动计时器，函数返回唯一的整数计

谁借莪１个温暖的怀抱￠/ 2022年11月17日 05:25/ 0 赞/ 174 阅读

相关 python计时器

下面记录一下常用的一些函数，其中perf\_counter可以测量一个较短时间的高精度时钟，而使用time方法对于较短时间，测得的值为0，所以此时可以使用perf\_count

谁借莪１个温暖的怀抱￠/ 2022年10月16日 09:41/ 0 赞/ 179 阅读

相关计时器

实现一个打点计时器，要求 1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1 2、

Love The Way You Lie/ 2022年06月03日 23:59/ 0 赞/ 223 阅读

相关 js计时器

JS提供了两种计时器的方法 1. window.setInterval()；这个方法就是在一个周期内反复执行一直到窗口关闭或者 clearInterval()

忘是亡心i/ 2022年05月24日 01:09/ 0 赞/ 281 阅读

相关 TimerTask计时器

TimerTask计时器重点内容 TimerTask是一个抽象类子类由timer安排一次或者重复执行代码： public class TimerTa

忘是亡心i/ 2022年05月16日 02:47/ 0 赞/ 276 阅读

相关计时器

package MYDemo; /定义一个计时器，点击开始按钮以后开始运行，每隔1ms开始计时，点击停止按钮停止计时，计时器常用time

川长思鸟来/ 2022年03月31日 14:23/ 0 赞/ 293 阅读

相关计时器程序

package MYDemo; import javax.swing.; import java.awt.HeadlessException;

不念不忘少年蓝@/ 2021年12月16日 06:19/ 0 赞/ 329 阅读

相关 Vue中使用计时器实时刷新页面数据

Vue中使用计时器实时刷新页面数据 1. 需求说明在前端开发中，往往会遇到页面需要实时刷新数据的情况，给用户最新的数据展示。 -----------

朱雀/ 2021年08月03日 00:31/ 0 赞/ 496 阅读