Vue考试倒计时和计算考试用时

简介: <template> <div>倒计时: {{ keepTime }}</div></template>

效果

image.png

代码实现

<template>
  <div>倒计时: {
   
   {
   
    keepTime }}</div>
</template>

<script>
export default {
   
   
  data() {
   
   
    return {
   
   
      keepTime: "",
    };
  },
  created() {
   
   
    this.StartCountDown();
  },
  methods: {
   
   
    // 开始时间
    StartCountDown() {
   
   
      var mydate = new Date();
      mydate.setMinutes(mydate.getMinutes() + 90); //获取后端返回的时间
      this.settime = mydate;
      // 时间到执行停止
      let time = setInterval(() => {
   
   
        if (this.flag == true) {
   
   
          clearInterval(time);
        }
        this.timeDown();
      }, 100);
    },
    // 转换
    timeDown() {
   
   
      const endTime = new Date(this.settime);
      const nowTime = new Date();
      let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
      let d = parseInt(leftTime / (24 * 60 * 60));
      let h = this.formate(parseInt((leftTime / (60 * 60)) % 24));
      let m = this.formate(parseInt((leftTime / 60) % 60));
      let s = this.formate(parseInt(leftTime % 60));
      if (leftTime <= 0) {
   
   
      }
      this.keepTime = `${h}:${m}:${
     
     s}`;
      //计算考试时间
       //var parts = this.keepTime.split(":");
     // var num =  parseInt(parts[0]) * 60 + parseInt(parts[1]) + parseInt(parts[2]) / 60;
     // var minutes = Math.floor(num * 100) / 100;
      //var timelength = this.WhenTime - minutes;//this.WhenTime 为考试时间如:100分钟减去所转换的时间
     // this.timelengthasd = Math.ceil(timelength);//向上取整不到一分钟按一分钟算
    },
    formate(time) {
   
   
      if (time >= 10) {
   
   
        return time;
      } else {
   
   
        return `0${
     
     time}`;
      }
    },
  },
};
</script>

<style>
</style>
目录
相关文章
|
1天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
12 5
Vue使用element中table组件实现单选一行
|
1天前
|
JavaScript
Vue实现按钮级别权限
文章介绍了在Vue中实现按钮级别权限的两种方法:使用自定义Vue指令和使用v-if指令配合自定义方法。
11 4
Vue实现按钮级别权限
|
1天前
|
JavaScript
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
本文讨论了在使用Vue和Element UI实现树形数据和懒加载时遇到的“Maximum call stack size exceeded”错误,指出问题的原因通常是因为数据中的唯一标识符`id`不唯一,导致递归渲染造成调用栈溢出。
9 1
Vue+element_Table树形数据与懒加载报错Error in render: “RangeError: Maximum call stack size exceeded“
|
2天前
|
JavaScript
vue知识点
vue知识点
12 4
|
2天前
|
存储 JavaScript
vue页面跳转取消上一个页面请求
本文介绍了在Vue中如何取消上一个页面的请求,以避免页面跳转时请求未完成导致的数据错误。核心方法是使用axios的请求拦截器设置请求的取消令牌(cancelToken),并在vuex中存储这些取消令牌的引用。当进行路由跳转时,通过路由守卫清除这些请求,达到取消上一个页面请求的目的。
14 2
|
2天前
如何在 Vue3 中创建一个计算属性?
如何在 Vue3 中创建一个计算属性?
8 1
|
1天前
|
JavaScript
vue第一个项目之音乐播放器
vue第一个项目之音乐播放器
|
8天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
5天前
|
JavaScript
vue异步渲染
vue异步渲染
|
9天前
|
JavaScript
vue中watch的用法
vue中watch的用法