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

先上效果

在这里插入图片描述

代码实现

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

张清悠

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值