电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

Vue 封裝防刷新考試倒計時組件的實現

瀏覽:53日期:2023-01-15 17:19:02

本文詳細的介紹了防刷新考試倒計時組件 ,分享給大家,也給自己留個筆記,感興趣的可以了解下

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 防刷新考試倒計時組件內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: Vue
相關文章:
主站蜘蛛池模板: 国际金融网_每日财经新资讯网| 天津次氯酸钠酸钙溶液-天津氢氧化钠厂家-天津市辅仁化工有限公司 | LNG鹤管_内浮盘价格,上装鹤管,装车撬厂家-连云港赛威特机械 | 焊锡丝|焊锡条|无铅锡条|无铅锡丝|无铅焊锡线|低温锡膏-深圳市川崎锡业科技有限公司 | 液压升降平台_剪叉式液压/导轨式升降机_传菜机定做「宁波日腾升降机厂家」 | 油液红外光谱仪-油液监测系统-燃油嗅探仪-上海冉超光电科技有限公司 | 水平筛厂家-三轴椭圆水平振动筛-泥沙震动筛设备_山东奥凯诺矿机 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 阜阳成人高考_阜阳成考报名时间_安徽省成人高考网 | 上海盐水喷雾试验机_两厢式冷热冲击试验箱-巨怡环试 | 净化板-洁净板-净化板价格-净化板生产厂家-山东鸿星新材料科技股份有限公司 | 12cr1mov无缝钢管切割-15crmog无缝钢管切割-40cr无缝钢管切割-42crmo无缝钢管切割-Q345B无缝钢管切割-45#无缝钢管切割 - 聊城宽达钢管有限公司 | 高压油管,液压接头,液压附件-烟台市正诚液压附件 | 400电话_400电话申请_888元包年_400电话办理服务中心_400VIP网 | 硫化罐-电加热蒸汽硫化罐生产厂家-山东鑫泰鑫智能装备有限公司 | MVR蒸发器厂家-多效蒸发器-工业废水蒸发器厂家-康景辉集团官网 | 渗透仪-直剪仪-三轴仪|苏州昱创百科 | 点焊机-缝焊机-闪光对焊机-电阻焊设备生产厂家-上海骏腾发智能设备有限公司 | 合肥风管加工厂-安徽螺旋/不锈钢风管-通风管道加工厂家-安徽风之范 | 耐压仪-高压耐压仪|徐吉电气| 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | 广东高华家具-公寓床|学生宿舍双层铁床厂家【质保十年】 | 高低温试验房-深圳高低温湿热箱-小型高低温冲击试验箱-爱佩试验设备 | 企业微信scrm管理系统_客户关系管理平台_私域流量运营工具_CRM、ERP、OA软件-腾辉网络 | 山东艾德实业有限公司| 金属管浮子流量计_金属转子流量计厂家-淮安润中仪表科技有限公司 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 餐饮小吃技术培训-火锅串串香培训「何小胖培训」_成都点石成金[官网] | 二手回收公司_销毁处理公司_设备回收公司-找回收信息网 | 拉曼光谱仪_便携式|激光|显微共焦拉曼光谱仪-北京卓立汉光仪器有限公司 | 伊卡洛斯软装首页-电动窗帘,别墅窗帘,定制窗帘,江浙沪1000+别墅窗帘案例 | 建大仁科-温湿度变送器|温湿度传感器|温湿度记录仪_厂家_价格-山东仁科 | 彭世修脚_修脚加盟_彭世修脚加盟_彭世足疗加盟_足疗加盟连锁_彭世修脚技术培训_彭世足疗 | 植筋胶-粘钢胶-碳纤维布-碳纤维板-环氧砂浆-加固材料生产厂家-上海巧力建筑科技有限公司 | 赛尔特智能移动阳光房-阳光房厂家-赛尔特建筑科技(广东)有限公司 | 不锈钢列管式冷凝器,换热器厂家-无锡飞尔诺环境工程有限公司 | 拖链电缆_柔性电缆_伺服电缆_坦克链电缆-深圳市顺电工业电缆有限公司 | 回转窑-水泥|石灰|冶金-巩义市瑞光金属制品有限责任公司 | 硅胶布|电磁炉垫片|特氟龙胶带-江苏浩天复合材料有限公司 | 123悬赏网_发布悬赏任务_广告任务平台| 酒万铺-酒水招商-酒水代理| 奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌 |