Vue计时和倒计时

最新推荐文章于 2024-07-25 16:58:06 发布

大风车转悠悠

最新推荐文章于 2024-07-25 16:58:06 发布

阅读量251

点赞数 1

分类专栏：大前端文章标签： vue 计时和倒计时

本文链接：https://blog.csdn.net/qq_33189961/article/details/109360519

版权

大前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

0、相关变量

considerateTime: 30, //思考时间
oneAnswerTime: 180,  //1题的回答时间
totalTimeH: 0,   //总时间的小时
totalTimeM: 0,   //总时间的分钟
totalTimeS: 0,   //总时间的秒

一、计时

1、效果

2、主要代码

counttimeOftotal(){//面试总时长计时
                this.timer = setInterval(()=>{
                    this.totalTimeS++
                    if(this.totalTimeS===60){// 60s后加1分
                        this.totalTimeM++
                        this.totalTimeS = 0
                    }
                    if(this.totalTimeM===60){// 60s后加1h
                        this.totalTimeH++
                        this.totalTimeM = 0
                    }
                },1000)
            }

二、倒计时

1、效果

2、主要代码

countdownOfConsiderateTime() {//思考时间的倒计时
                this.timer = setInterval(()=>{
                    this.considerateTime--
                    if(this.considerateTime===0){

                       //定时完成后的业务逻辑//

                        clearInterval(this.timer)   //清除定时器
                    }
                },1000)
            }