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 相关文章推荐
用javascript动态调整iframe高度的代码
Apr 10 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
AngularJs bootstrap搭载前台框架——准备工作
Sep 01 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
vue中img src 动态加载本地json的图片路径写法
Apr 25 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
Node.js fs模块原理及常见用途
Oct 22 Javascript
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
php下实现农历日历的代码
2007/03/07 PHP
Yii2框架实现数据库常用操作总结
2017/02/08 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
jQuery基于扩展实现的倒计时效果
2016/05/14 Javascript
基于WebUploader的文件上传js插件
2016/08/19 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
node.js-v6新版安装具体步骤(分享)
2017/09/06 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
js实现简单的倒计时
2021/01/28 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python实现高效求解素数代码实例
2015/06/30 Python
python处理xml文件的方法小结
2017/05/02 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
python模块之subprocess模块级方法的使用
2019/03/26 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
python绘制分布折线图的示例
2020/09/24 Python
python爬取招聘要求等信息实例
2020/11/20 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
金智子午JAVA面试题
2015/09/04 面试题
J2EE中的容器都包括哪些
2013/08/21 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
拓展培训心得体会
2014/01/04 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
女生抽烟检讨书
2014/10/05 职场文书
花田少年史观后感
2015/06/16 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
mysql的Buffer Pool存储及原理
2022/04/02 MySQL