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学习笔记(六) Date 日期类型
Jun 19 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
浅谈JavaScript字符集
May 22 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
js实现简单排列组合的方法
Jan 27 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
基于jquery实现的鼠标悬停提示案例
Dec 11 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
vue 动态生成拓扑图的示例
Jan 03 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
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP会话控制实例分析
2016/12/24 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
基于NodeJS的前后端分离的思考与实践(五)多终端适配
2014/09/26 NodeJs
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
Bootstrap精简教程
2015/11/27 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
2016/01/08 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
2017/06/28 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
小程序使用分包的示例代码
2020/03/23 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
itchat接口使用示例
2017/10/23 Python
Python AES加密实例解析
2018/01/18 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
基于python的Paxos算法实现
2019/07/03 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
spyder 在控制台(console)执行python文件,debug python程序方式
2020/04/20 Python
python3通过subprocess模块调用脚本并和脚本交互的操作
2020/12/05 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
历史学专业推荐信
2013/11/06 职场文书
航空大学应届生求职信
2013/11/10 职场文书
高中自我鉴定
2013/12/20 职场文书
酒店销售经理岗位职责
2014/01/31 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
百家讲坛观后感
2015/06/12 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis