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 Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
vue实现轮播图帧率播放
Jan 26 Vue.js
何时使用Map来代替普通的JS对象
Apr 29 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
利用PHP制作简单的内容采集器的代码
2007/11/28 PHP
PHP 类型转换函数intval
2009/06/20 PHP
二招解决php乱码问题
2012/03/25 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
laravel自定义分页效果
2017/07/23 PHP
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
Python字符串转换成浮点数函数分享
2015/07/24 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
详解Python读取yaml文件多层菜单
2019/03/23 Python
python获取Linux发行版名称
2019/08/30 Python
SELENIUM自动化模拟键盘快捷键操作实现解析
2019/10/28 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
java程序员面试交流
2012/11/29 面试题
如何写早恋检讨书
2014/09/10 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
辞职信怎么写
2015/02/27 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
MySQL学习总结-基础架构概述
2021/04/05 MySQL
方法汇总:Python 安装第三方库常用
2022/04/26 Python