vue 一个页面多个定时器

19 篇文章 0 订阅

有时候我们一个页面会有多个倒计时,但是总不能有几个倒计时就写几个倒计时的方法吧???下面就是多个倒计时的方法

timer:[],                           // 定时器开关
counts:[
         {
               countNumber:0,
         },
         {
               countNumber:0, 
         },
],
methods:{
	init(){
                //获取当前时间
                let cur = new Date().getTime();
                //设置截止时间
                let str=[
                    "2022/6/30 00:00:00",
                    "2022/7/1 00:00:00",
                ];
                // 倒计时
                this.counts.map((item,index)=>{
                	// 当前时间减去停止时间
                    let leftTime = parseInt((new Date(str[index])-cur)/1000)
                    this.count(leftTime,(msg)=>{
                        item.countNumber=msg;
                    })
                })
			},
            // 倒计时
            count(time,fn){
                let t=this;
                let times=time;
                ti()
                this.timer.push(setInterval(ti,1000))
                function ti(){
                    times--
                    // 定义变量 h,m,s保存倒计时的时间  
                    let h,m,s;  
                    if (times>=0) {
                        // 时分秒
                        h = Math.floor(times/60/60);  
                        m = Math.floor(times/60%60);  
                        s = Math.floor(times%60);
                        let msg=t.repair(h)+':'+t.repair(m)+':'+t.repair(s);
                        fn(msg);
                    }else{
                        // 关闭定时器
                        clearInterval(t.timer);
                        return false
                    }
                }
            },
            // 数字补0
            repair(o){
                let x=o;
                let t=x > 9 ? x : '0' + x
                return t
            },
            // 关闭定时器
            stopInter(){
                this.timer.map((item)=>{
                    clearInterval(item);
                })
            },
}

在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值