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 在线压缩和格式化收藏
Jan 16 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
js关闭父窗口时关闭子窗口
Apr 01 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
js实现数字每三位加逗号的方法
Feb 05 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
Sep 28 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
使用layui实现树形结构的方法
Sep 20 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
example1.php
2006/10/09 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
PHP防注入安全代码
2008/04/09 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
ThinkPHP框架搭建及常见问题(XAMPP安装失败、Apache/MySQL启动失败)
2016/04/15 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
js function使用心得
2010/05/10 Javascript
js中replace的用法总结
2013/12/27 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
vue中实现先请求数据再渲染dom分享
2018/03/17 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
python登录豆瓣并发帖的方法
2015/07/08 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
pycham查看程序执行的时间方法
2018/11/29 Python
Python 进程操作之进程间通过队列共享数据,队列Queue简单示例
2019/10/11 Python
python logging添加filter教程
2019/12/24 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
基于Python的OCR实现示例
2020/04/03 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
煤矿班组长的职责
2013/12/25 职场文书
认购协议书范本
2014/04/22 职场文书
《中国梦我的梦》中学生演讲稿
2014/08/20 职场文书
机关作风建设自查报告
2014/10/22 职场文书
铣工实训报告
2014/11/05 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python