Vue实现 在线考试型倒计时

因公司需求，现制作一种在线考试型倒计时

注意：底层为Vue，所有的提示使用了elementUI，可根据需求引入或者自行改造制作

Html部分

<template>
    <div>
        <p><i class="el-icon-time"></i> {{ `${hr}: ${min}: ${sec}` }}</p>
        <el-button v-show="isshow1" @click="begin" round type="primary">开始答题</el-button>
        <el-button v-show="!isshow1" @click="open" round type="danger">交卷</el-button>
    </div>
</template>

Script部分

<script>
    // 需引入elementUI配合提示，或者自行制作
    export default {
        data() {
            return {
                isshow1: true,
                time: '',
                hr: 3,
                min: 30,
                sec: 0,
            }
        },
        methods: {
            begin() {
                // 点击按钮后开始计算指定长度的时间
                this.time = (Date.parse(new Date()) + ((3.5 * 60 * 60)) * 1000);
                // 开始执行倒计时
                this.countdown();
                // 更换按钮，根据情况选择v-if或v-show
                this.isshow1 = false;

                this.$message({
                    type: 'success',
                    message: '开始答题'
                });
            },
            countdown() {
                const end = this.time; // 定义结束时间
                const now = Date.parse(new Date()); // 获取本地时间
                const msec = end - now; // 定义总共所需的时间
                // 将时间戳进行格式化
                let hr = parseInt(msec / 1000 / 60 / 60 % 24);
                let min = parseInt(msec / 1000 / 60 % 60);
                let sec = parseInt(msec / 1000 % 60);
                // 倒计时结束时的操作
                const that = this;
                if (this.hr == 0 && this.min == 0 && this.sec == 0) {
                    console.log('时间已经结束，答题完毕');
                    this.hr = 3;
                    this.min = 30;
                    this.sec = 0;
                } else {
                    // 如时间未归零则继续在一秒后执行
                    this.hr = hr > 9 ? hr : '0' + hr;
                    this.min = min > 9 ? min : '0' + min;
                    this.sec = sec > 9 ? sec : '0' + sec;
                    setTimeout(that.countdown, 1000)
                }
            },
            open() {
                this.$confirm('即将结束答题, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then((action) => {
                    // eleUI的确定结束回调函数方法
                    if (action === 'confirm') {
                        this.hr = 0;
                        this.min = 0;
                        this.sec = 0;
                        console.log(this.hr + ',' + this.min + ',' + this.sec);
                        this.isshow1 = true;
                    }
                    this.$message({
                        type: 'success',
                        message: '交卷成功!'
                    });
                }).catch(() => {
                    // 点击取消后
                    this.$message({
                        type: 'info',
                        message: '已取消交卷'
                    });
                });

            }
        }
    }
</script>

我是Slient，一枚小白，后续会在GitHub和CSDN继续分享新的发现与创作，祝大家快乐。

Slient的GitHub地址