因公司需求，现制作一种在线考试型倒计时
注意：底层为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地址
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/127335.html