vue实现两个小时倒计时

vue实现两个小时倒计时

<template>
    <div class="start-test">
        <el-card>
            <!-- 倒计时 -->
            <div class="count-time">
                <span>考试剩余时间：</span>
                <span><i class="el-icon-time"></i> {{ `${h}: ${m}: ${s}` }}</span>
            </div>
			<el-button type="primary" @click="countTime">开始答题</el-button>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'StartTest',
    data () {
        return {
            timer: null,
            count: '',
            h: '02',
            m: '00',
            s: '00'
        }
    },
    methods: {
        // 点击开始答题，启用2个小时倒计时
        countTime () {
            // 定义两个小时的秒数，此处根据需要进行定义
            const time = 7200
            if (!this.timer) {
                this.count = time
                this.timer = setInterval(() => {
                    if (this.count > 0 && this.count <= time) {
                        this.count--
                        const h = parseInt((this.count) / (60 * 60))
                        const m = parseInt((this.count) / 60 % 60)
                        const s = parseInt((this.count) % 60)
                        if (this.h === 0 && this.m === 0 && this.s === 0) {
                            this.$message({
                                message: '答题时间结束，将自动交卷！',
                                type: 'warning'
                            })
                        } else {
                            this.h = h > 9 ? h : '0' + h
                            this.m = m > 9 ? m : '0' + m
                            this.s = s > 9 ? s : '0' + s
                        }
                    } else {
                        clearInterval(this.timer)
                        this.timer = null
                    }
                }, 1000)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.count-time {
    height: 60px;

    span {
        font-size: 20px;
        font-weight: 700;
    }
}
</style>