Vue 封装防刷新考试倒计时组件的实现


Posted in Javascript onJune 05, 2020

本文详细的介绍了防刷新考试倒计时组件 ,分享给大家,也给自己留个笔记,感兴趣的可以了解下

Vue 封装防刷新考试倒计时组件的实现

<!-- 考试倒计时组件 -->
<template>
 <div class="time">
  <p>00:{{timerCount2}}:{{timerCount1}}</p>
  <button @click="reset">重新计时</button>
 </div>
</template>


<script>
export default {
 name: "Time",
 data() {
  return {
   timeSeconds: 0,
   timeMinutes: 0,
   seconds: 59, // 秒
   minutes: 1, // 分
   timer: null
  };
 },
 methods: {
  num(n) {
   return n < 10 ? "0" + n : "" + n;
  },
  // 重新计时
  reset() {
   sessionStorage.removeItem("answered");
   window.location.reload();
   localStorage.removeItem("startTime1");
   localStorage.removeItem("startTime2");
   clearInterval(this.timer);
  },
  // 清除
  clear() {
   localStorage.removeItem("startTime1");
   localStorage.removeItem("startTime2");
   sessionStorage.setItem("answered", 1);
   clearInterval(this.timer);
  },
  // 倒计时
  timing() {
   let [startTime1, startTime2] = [ localStorage.getItem("startTime1"), localStorage.getItem("startTime2") ];
   let nowTime = new Date().getTime();
   if (startTime1) {
    let surplus = this.seconds - parseInt((nowTime - startTime1) / 1000);
    this.timeSeconds = surplus <= 0 ? 0 : surplus;
   } else {
    this.timeSeconds = this.seconds;
    localStorage.setItem("startTime1", nowTime); //存储秒
   }
   if (startTime2) {
    this.timeMinutes = startTime2;
   } else {
    this.timeMinutes = this.minutes;
    localStorage.setItem("startTime2", this.minutes); //存储分
   }
   this.timer = setInterval(() => {
    if ( this.timeSeconds == 0 && this.timeMinutes != 0 && this.timeMinutes > 0 ) {
     let nowTime = new Date().getTime();
     this.timeSeconds = this.seconds;
     localStorage.setItem("startTime1", nowTime);
     this.timeMinutes--;
     localStorage.setItem("startTime2", this.timeMinutes);
    } else if (this.timeMinutes == 0 && this.timeSeconds == 0) {
     this.timeSeconds = 0;
     this.clear();
     alert("考试时间到");
    } else {
     this.timeSeconds--;
    }
   }, 1000);
  }
 },
 mounted() {
  if (sessionStorage.getItem("answered") != 1) {
   this.timing();
  }
 },
 computed: {
  timerCount1() {
   return this.timeSeconds < 10 ? "0" + this.timeSeconds : "" + this.timeSeconds;
  },
  timerCount2() {
   return this.timeMinutes < 10 ? "0" + this.timeMinutes : "" + this.timeMinutes;
  }
 },
 destroyed() {
  // 退出后清除计时器
  if (this.timer) {
   clearInterval(this.timer);
  }
 }
};
</script>
<style scoped>
.time {
 color: #f72a3a;
 font-weight: bold;
 font-size: 26px;
}
</style>

到此这篇关于Vue 封装防刷新考试倒计时组件的实现的文章就介绍到这了,更多相关Vue 防刷新考试倒计时组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 模拟类搜索框自动完成搜索提示功能(改进)
May 24 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
JS中的phototype详解
Feb 04 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
微信小程序实现一个简单swiper代码实例
Dec 30 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 #Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 #Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 #Javascript
JS删除数组指定值常用方法详解
Jun 04 #Javascript
Vue项目接入Paypal实现示例详解
Jun 04 #Javascript
Paypal支付不完全指北
Jun 04 #Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 #Javascript
You might like
深入解析WordPress中加载模板的get_template_part函数
2016/01/11 PHP
js删除所有的cookie的代码
2010/11/25 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
详解layui弹窗父子窗口之间传参数的方法
2018/01/16 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
Python模块学习 datetime介绍
2012/08/27 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
详解Python字符串对象的实现
2015/12/24 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
英国著名的小众美容品牌网站:Alyaka
2017/08/08 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
关于安全演讲稿
2014/05/09 职场文书
连锁超市项目计划书
2014/09/15 职场文书
运动会闭幕词
2015/01/28 职场文书
红色电影观后感
2015/06/18 职场文书
运动会3000米加油稿
2015/07/21 职场文书
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS