Vue实现 在线考试型倒计时
因公司需求,现制作一种在线考试型倒计时注意:底层为Vue,所有的提示使用了elementUI,可根据需求引入或者自行改造制作Html部分<template><div><p><i class="el-icon-time"></i> {{ `${hr}: ${min}: ${sec}` }}</p><el-button v-
·
因公司需求,现制作一种在线考试型倒计时
注意:底层为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继续分享新的发现与创作,祝大家快乐。
更多推荐
已为社区贡献1条内容
所有评论(0)