Vue中倒计时的做法

项目需要做一个考试倒计时的功能,参考了CSDN上的一遍博文,做出自己的功能,在此谢谢sinat_17775997

<template>
  <el-button type="text" v-text="keepTime" @click="StartCountDown"></el-button>
</template>

export default {
    data() {
        return {
            keepTime: '倒计时',
            limittime:100,
            settime: '',
            flag: false
        }
    },
    methods: {
        StartCountDown() {
            var mydate = new Date();
            mydate.setMinutes(mydate.getMinutes() + this.limittime);
            this.settime=mydate;

            let time = setInterval(() => {
                if (this.flag == true) {
                    clearInterval(time)
                }
                this.timeDown()
            }, 100)
        },
        timeDown() {
            const endTime = new Date(this.settime);
            const nowTime = new Date();
            let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
            let d = parseInt(leftTime / (24 * 60 * 60));
            let h = this.formate(parseInt(leftTime / (60 * 60) % 24));
            let m = this.formate(parseInt(leftTime / 60 % 60));
            let s = this.formate(parseInt(leftTime % 60));
            if (leftTime <= 0) {
                this.flag = true;
                alert("时间到,停止作答");
            }
            this.keepTime = `${h}:${m}:${s}`;
        },
        formate(time) {
            if (time >= 10) {
                return time
            } else {
                return `0${time}`
            }
        },
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容