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

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

Vue中用JSON實現刷新界面不影響倒計時

瀏覽:42日期:2022-11-11 16:33:46

本文實例為大家分享了Vue中用JSON實現刷新界面不影響倒計時的具體代碼,供大家參考,具體內容如下

效果展示:

Vue中用JSON實現刷新界面不影響倒計時

部分代碼

<el-form-item v-if='env === ’dev’'> <el-input v-model='ruleForm.nucCode' size='small' placeholder='請輸入短信驗證碼' /> <el-button @click='getNumCode'> <span v-if='isShowNucTime' >{{Nuc_time}} S</span> <span v-else-if='!isShowNucTime && NucAgain' >重新獲取驗證碼</span> <span v-else >獲取短信驗證碼</span> </el-button></el-form-item>

isShowNucTime:boolean = false;NucAgain: boolean = false;Nuc_code_freash: boolean = false; // 判斷驗證碼是否過期Nuc_time: number = 60;end_time: number = 0;private getCode() { let clicktime = new Date().getTime() + 60000; // 本地存儲 localStorage.setItem(’myEndTime’, JSON.stringify(clicktime)); this.timeDown(clicktime); } // 驗證碼倒計時 timeDown(counttime: any) { // 判斷是否正在倒計時 if (this.isShowNucTime) return; this.userChange = false; this.isShowNucTime = true; this.isGetNucCode = true; this.end_time = Number(localStorage.getItem(’myEndTime’)); this.Nuc_time = Math.ceil((this.end_time - new Date().getTime()) / 1000); let interval = setInterval(() => { this.Nuc_time--; if (this.Nuc_time < 1) { this.Nuc_time = 60; this.isShowNucTime = false; localStorage.removeItem(’myEndTime’); if (!this.userChange) { this.NucAgain = true; } clearInterval(interval); } }, 1000) }private created(): void { let myEndTime= localStorage.getItem(’myEndTime’); myEndTime && this.timeDown(myEndTime); }

重要的代碼部分

Vue中用JSON實現刷新界面不影響倒計時

Vue中用JSON實現刷新界面不影響倒計時

實現原理

1.首次加載頁面 點擊開始

1).獲取當前時間戳與要倒計時的時間相加獲得要停止計時的時間

2).用localStorage保存當前時間戳

3).通過js的setInterval定時器進行倒計時

4).當倒計時結束后 清除localStorage中保存的結束時間

2.當第n次進入頁面或刷新頁面時

1).首先判斷localStorage中倒計時是否結束

2).沒有結束則繼續倒計時

3).如果結束則顯示重新發送驗證碼

主要運用了localStorage + new Date().getTime() PS:本文只是展示部分代碼,一味的復制粘貼并不能運行,還是搞清楚邏輯自己實現比較靠譜!

關于vue.js組件的教程,請大家點擊專題vue.js組件學習教程進行學習。

更多vue學習教程請閱讀專題《vue實戰教程》

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 协议书_协议合同格式模板范本大全 | ph计,实验室ph计,台式ph计,实验室酸度计,台式酸度计 | 最新电影-好看的电视剧大全-朝夕电影网 | 洛阳防爆合格证办理-洛阳防爆认证机构-洛阳申请国家防爆合格证-洛阳本安防爆认证代办-洛阳沪南抚防爆电气技术服务有限公司 | 步进电机_agv电机_伺服马达-伺服轮毂电机-和利时电机 | 5nd音乐网|最新流行歌曲|MP3歌曲免费下载|好听的歌|音乐下载 免费听mp3音乐 | 东莞螺杆空压机_永磁变频空压机_节能空压机_空压机工厂批发_深圳螺杆空压机_广州螺杆空压机_东莞空压机_空压机批发_东莞空压机工厂批发_东莞市文颖设备科技有限公司 | 污水提升器,污水提升泵,地下室排水,增压泵,雨水泵,智能供排水控制器-上海智流泵业有限公司 | 短信通106短信接口验证码接口群发平台_国际短信接口验证码接口群发平台-速度网络有限公司 | 不锈钢闸阀_球阀_蝶阀_止回阀_调节阀_截止阀-可拉伐阀门(上海)有限公司 | 冷却塔改造厂家_不锈钢冷却塔_玻璃钢冷却塔改造维修-广东特菱节能空调设备有限公司 | 换链神器官网-友情链接交换、购买交易于一体的站长平台 | 幂简集成 - 品种超全的API接口平台, 一站搜索、试用、集成国内外API接口 | 物流之家新闻网-最新物流新闻|物流资讯|物流政策|物流网-匡匡奈斯物流科技 | 即用型透析袋,透析袋夹子,药敏纸片,L型涂布棒-上海桥星贸易有限公司 | 美国HASKEL增压泵-伊莱科elettrotec流量开关-上海方未机械设备有限公司 | 防爆大气采样器-防爆粉尘采样器-金属粉尘及其化合物采样器-首页|盐城银河科技有限公司 | 心得体会网_心得体会格式范文模板 | 东莞市海宝机械有限公司-不锈钢分选机-硅胶橡胶-生活垃圾-涡电流-静电-金属-矿石分选机 | 食品无尘净化车间,食品罐装净化车间,净化车间配套风淋室-青岛旭恒洁净技术有限公司 | 黑田精工电磁阀-CAMMOZI气缸-ROSS电磁-上海茂硕机械设备有限公司 | 慈溪麦田广告公司,提供慈溪广告设计。 | 视频教程导航网_视频教程之家_视频教程大全_最新视频教程分享发布平台 | EDLC超级法拉电容器_LIC锂离子超级电容_超级电容模组_软包单体电容电池_轴向薄膜电力电容器_深圳佳名兴电容有限公司_JMX专注中高端品牌电容生产厂家 | 烟气换热器_GGH烟气换热器_空气预热器_高温气气换热器-青岛康景辉 | 纯化水设备-纯水设备-超纯水设备-[大鹏水处理]纯水设备一站式服务商-东莞市大鹏水处理科技有限公司 | 河南道路标志牌_交通路标牌_交通标志牌厂家-郑州路畅交通 | 消泡剂-水处理消泡剂-涂料消泡剂-切削液消泡剂价格-东莞德丰消泡剂厂家 | TPM咨询,精益生产管理,5S,6S现场管理培训_华谋咨询公司 | 沈飞防静电地板__机房地板-深圳市沈飞防静电设备有限公司 | 家庭教育吧-在线家庭教育平台,专注青少年家庭教育 | 美的商用净水器_美的直饮机_一级代理经销商_Midea租赁价格-厂家反渗透滤芯-直饮水批发品牌售后 | 上海璟文空运首页_一级航空货运代理公司_机场快递当日达 | 托利多电子平台秤-高精度接线盒-托利多高精度电子秤|百科 | 电池挤压试验机-自行车喷淋-车辆碾压试验装置-深圳德迈盛测控设备有限公司 | 蓄电池回收,ups电池后备电源回收,铅酸蓄电池回收,机房电源回收-广州益夫铅酸电池回收公司 | 电池高低温试验箱-气态冲击箱-双层电池防爆箱|简户百科 | 自进式锚杆-自钻式中空注浆锚杆-洛阳恒诺锚固锚杆生产厂家 | 鹤壁创新仪器公司-全自动量热仪,定硫仪,煤炭测硫仪,灰熔点测定仪,快速自动测氢仪,工业分析仪,煤质化验仪器 | 湖南教师资格网-湖南教师资格证考试网| 淄博不锈钢,淄博不锈钢管,淄博不锈钢板-山东振远合金科技有限公司 |