vue在线考试实现倒计时

.. ..

已于 2023-04-06 16:36:07 修改

阅读量1.1k

点赞数 1

文章标签： vue.js javascript 数据库

于 2023-04-06 16:14:01 首次发布

本文链接：https://blog.csdn.net/weixin_45597687/article/details/129991494

版权

本文介绍了一个使用Vue.js和moment.js库来创建倒计时功能的实现过程，包括设置参数、获取当前时间、计算时间差以及页面显示。同时，讨论了在页面离开时如何管理定时器，确保数据安全并提醒用户可能的未保存更改。

摘要由CSDN通过智能技术生成

1.设置参数：

restTime: "", // 剩余时间
startDataTime: '', // 开始时间，自己设置或数据库获取
endDataTime: '', // 结束时间，自己设置或数据库获取
timeStamp: null, // 接收剩余时间戳
timer: null,

2.获取当前时间

mounted() {
    this.startDataTime=this.getCurrentTime();
},

getCurrentTime() {
  //获取当前时间
  var _this = this;
  let yy = new Date().getFullYear();
  let mm = new Date().getMonth()+1;
  let dd = new Date().getDate();
  let hh = new Date().getHours();
  if (mm >= 1 && mm <= 9) {
    mm = "0" + mm;
  }
  let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
  let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
  return yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
},

3.使用moment插件获取时间差

npm install moment

main.js中

import moment from "moment";
moment.locale('zh-cn');
Vue.prototype.$moment = moment

//获取后台返回的时间（分钟）
this.endDataTime=this.getEndTime(this.paperData.answerPaperTime);
// 处理字符串为时间类型
let startTime = Date.parse(this.startDataTime.replace(/-/g,"-"));
let endTime = Date.parse(this.endDataTime.replace(/-/g,"-"));
// 调用moment插件计算时间差(做完这一步timeStamp为时间戳了)
this.timeStamp = this.$moment(endTime).diff(this.$moment(startTime));

getEndTime(t){
  let date=new Date();     //1. js获取当前时间
  let min=date.getMinutes();  //2. 获取当前分钟
  date.setMinutes(min+t);  //3. 设置当前时间+10分钟：把当前分钟数+10后的值重新设置为date对象的分钟数
  let y = date.getFullYear();
  let m = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1);
  let d = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate();
  let h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
  let f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
  let s = date.getSeconds() < 10 ? ('0' + date.getseconds()) : date.getSeconds()
  let formatdate = y+'-'+m+'-'+d + " " + h + ":" + f + ":" + s;
  return formatdate
  console.log(formatdate) // 获取10分钟后的时间，格式为yyyy-mm-dd h:f:s
},

4.倒计时，每一秒执行一次。

mounted() {
    if(this.timer)clearInterval(this.timer)
    this.timer = setInterval(this.getRestTime,1000)
},

// 初始化获取时间
getRestTime () {
  // 赋值转时分秒
  this.restTime = this.toHHmmss(this.timeStamp);
  // 所以不是大于0秒
  if (this.timeStamp>= 1000) {
    // 1000为一秒
    // 如果大于1秒
    this.timeStamp = this.timeStamp -1000;
  } else {
    // 倒计时最后一秒将剩余时间修改
    this.restTime= "00:00:00";
    // 清除定时器
    clearInterval(this.timer)
    // 在这里编写考试交卷或自动取消订单的功能
    console.log("结束定时器!");
   
  }
},

// 时间戳转时分秒
toHHmmss (data) {
  var s;
  var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = (data % (1000 * 60)) / 1000;
  s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds);
  if (s.length>8){
    s= s.slice(0,8)
  }
  return s;
},

5.页面显示

剩余时间：{{restTime}}

6.离开销毁定时器

beforeRouteLeave(to, from , next){   //离开路由之前执行的函数
  if(this.isFlag==true){
    next(false)
    this.$confirm('您是否确认离开此页面-您输入的数据可能不会被保存？', '提示', {

      distinguishCancelAndClose: true,

      confirmButtonText: '确定',

      cancelButtonText: '取消',

      type: 'warning'

    }).then(() => {

      clearInterval(this.timer);

      next()

    }).catch(() => {

    });
  }else {
    next()
  }

},
// 退出页面清除定时器
beforeDestroy() { //销毁之前
  clearInterval(this.timer);
},
destroyed() {  //销毁完成
  window.removeEventListener("beforeunload", (e) => {
    console.log('页面destroyed，生效')
    this.beforeunloadHandler(e);
    clearInterval(this.timer);
  });
},

// 获取时间差长度只需要做一次
created() {
  this.stopF5Refresh();
  this.getList()
},

stopF5Refresh() {
  document.onkeydown = function (e) {
    var evt = window.event || e;
    var code = evt.keyCode || evt.which;
    //屏蔽F1---F12
    if (code > 111 && code < 124) {
      if (evt.preventDefault) {
        evt.preventDefault();
      } else {
        evt.keyCode = 0;
        evt.returnValue = false;
      }
    }
  };
  //禁止鼠标右键菜单
  document.oncontextmenu = function () {
    return false;
  };
  //阻止后退的所有动作，包括 键盘、鼠标手势等产生的后退动作。
  history.pushState(null, null, window.location.href);
  window.addEventListener("popstate", function () {
    history.pushState(null, null, window.location.href);
  });
},
beforeunloadHandler(e) {
  e = e || window.event;
  if (e) {
    e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存";
  }
  return "您是否确认离开此页面-您输入的数据可能不会被保存";
},