没有合适的资源?快使用搜索试试~ 我知道了~
本文详细的介绍了防刷新考试倒计时组件 ,分享给大家,也给自己留个笔记,感兴趣的可以了解下 <!-- 考试倒计时组件 --> <template> <div class=time> <p>00:{{timerCount2}}:{{timerCount1}}</p> <button @click=reset>重新计时</button> </div> </template> [removed] export default { name: Time, data() { return { timeSeconds: 0, timeMinutes: 0,
资源详情
资源评论
资源推荐
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);
weixin_38692969
- 粉丝: 4
- 资源: 953
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 智慧工地综合解决方案——用有思想的技术, 创造无处不在的美好PPT(42页).pptx
- 智慧工地产品方案Word(39页).doc
- HTTP请求流程深入解析与性能优化技术指南
- 智慧工地产品方案Word(179页).doc
- 57页-项目管理+验工计价+智慧工地解决方案.pdf
- 56页-金祺创智慧工地解决方案.pdf
- 51页-智慧工地解决方案.pdf
- 51页-智慧工地整体解决方案(四川).pdf
- 苹果手机撕膜机sw16可编辑全套技术资料100%好用.zip
- 49页-智慧工地整体解决方案.pdf
- 47页-数字孪生智慧工地解决方案.pdf
- 48页-智慧工地监管平台解决方案.pdf
- 48页-5G智慧工地解决方案.pdf
- 48页-智慧工地可视化解决方案.pdf
- 白色简洁风格的宠物猫咪整站网站模板.zip
- 白色简洁风格的宠物乐园网页CSS模板下载.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0