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

您的位置:首頁技術(shù)文章
文章詳情頁

Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時

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

本文實(shí)例為大家分享了Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時的具體代碼,供大家參考,具體內(nèi)容如下

效果展示:

Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時

部分代碼

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

isShowNucTime:boolean = false;NucAgain: boolean = false;Nuc_code_freash: boolean = false; // 判斷驗(yàn)證碼是否過期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); } // 驗(yàn)證碼倒計(jì)時 timeDown(counttime: any) { // 判斷是否正在倒計(jì)時 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實(shí)現(xiàn)刷新界面不影響倒計(jì)時

Vue中用JSON實(shí)現(xiàn)刷新界面不影響倒計(jì)時

實(shí)現(xiàn)原理

1.首次加載頁面 點(diǎn)擊開始

1).獲取當(dāng)前時間戳與要倒計(jì)時的時間相加獲得要停止計(jì)時的時間

2).用localStorage保存當(dāng)前時間戳

3).通過js的setInterval定時器進(jìn)行倒計(jì)時

4).當(dāng)?shù)褂?jì)時結(jié)束后 清除localStorage中保存的結(jié)束時間

2.當(dāng)?shù)趎次進(jìn)入頁面或刷新頁面時

1).首先判斷l(xiāng)ocalStorage中倒計(jì)時是否結(jié)束

2).沒有結(jié)束則繼續(xù)倒計(jì)時

3).如果結(jié)束則顯示重新發(fā)送驗(yàn)證碼

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

關(guān)于vue.js組件的教程,請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

更多vue學(xué)習(xí)教程請閱讀專題《vue實(shí)戰(zhàn)教程》

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 翻斗式矿车|固定式矿车|曲轨侧卸式矿车|梭式矿车|矿车配件-山东卓力矿车生产厂家 | 大连海岛旅游网>>大连旅游,大连海岛游,旅游景点攻略,海岛旅游官网 | 深圳激光打标机_激光打标机_激光焊接机_激光切割机_同体激光打标机-深圳市创想激光科技有限公司 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 3A别墅漆/3A环保漆_广东美涂士建材股份有限公司【官网】 | 气动绞车,山东气动绞车,气动绞车厂家-烟台博海石油机械有限公司 气动隔膜泵厂家-温州永嘉定远泵阀有限公司 | 篮球架_乒乓球台_足球门_校园_竞技体育器材_厂家_价格-沧州浩然体育器材有限公司 | 房间温控器|LonWorks|海思 | 苏州西装定制-西服定制厂家-职业装定制厂家-尺品服饰西装定做公司 | 天一线缆邯郸有限公司_煤矿用电缆厂家_矿用光缆厂家_矿用控制电缆_矿用通信电缆-天一线缆邯郸有限公司 | 诺冠气动元件,诺冠电磁阀,海隆防爆阀,norgren气缸-山东锦隆自动化科技有限公司 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 | 众能联合-提供高空车_升降机_吊车_挖机等一站工程设备租赁 | 菲希尔FISCHER测厚仪-铁素体检测仪-上海吉馨实业发展有限公司 | 电竞馆加盟,沈阳网吧加盟费用选择嘉棋电竞_售后服务一体化 | 数控专用机床,专用机床,自动线,组合机床,动力头,自动化加工生产线,江苏海鑫机床有限公司 | 迪威娱乐|迪威娱乐客服|18183620002| 上海盐水喷雾试验机_两厢式冷热冲击试验箱-巨怡环试 | 外观设计_设备外观设计_外观设计公司_产品外观设计_机械设备外观设计_东莞工业设计公司-意品深蓝 | 铁艺,仿竹,竹节,护栏,围栏,篱笆,栅栏,栏杆,护栏网,网围栏,厂家 - 河北稳重金属丝网制品有限公司 山东太阳能路灯厂家-庭院灯生产厂家-济南晟启灯饰有限公司 | 大行程影像测量仪-探针型影像测量仪-增强型影像测量仪|首丰百科 大通天成企业资质代办_承装修试电力设施许可证_增值电信业务经营许可证_无人机运营合格证_广播电视节目制作许可证 | 防爆电机生产厂家,YBK3电动机,YBX3系列防爆电机,YBX4节防爆电机--河南省南洋防爆电机有限公司 | 斗式提升机_链式斗提机_带式斗提机厂家无锡市鸿诚输送机械有限公司 | 电缆接头-防爆电缆接头-格兰头-金属电缆接头-防爆填料函 | 定做大型恒温循环水浴槽-工业用不锈钢恒温水箱-大容量低温恒温水槽-常州精达仪器 | 懂研帝_专业SCI论文润色机构_SCI投稿发表服务公司 | 不干胶标签-不干胶贴纸-不干胶标签定制-不干胶标签印刷厂-弗雷曼纸业(苏州)有限公司 | 广州活动策划公司-15+年专业大型公关活动策划执行管理经验-睿阳广告 | 土壤养分检测仪|土壤水分|土壤紧实度测定仪|土壤墒情监测系统-土壤仪器网 | 磁力轮,磁力联轴器,磁齿轮,钕铁硼磁铁-北京磁运达厂家 | 杭州高温泵_热水泵_高温油泵|昆山奥兰克泵业制造有限公司 | 磁力去毛刺机_去毛刺磁力抛光机_磁力光饰机_磁力滚抛机_精密金属零件去毛刺机厂家-冠古科技 | 篷房|仓储篷房|铝合金篷房|体育篷房|篷房厂家-华烨建筑科技官网 知名电动蝶阀,电动球阀,气动蝶阀,气动球阀生产厂家|价格透明-【固菲阀门官网】 | 幂简集成 - 品种超全的API接口平台, 一站搜索、试用、集成国内外API接口 | 焊锡丝|焊锡条|无铅锡条|无铅锡丝|无铅焊锡线|低温锡膏-深圳市川崎锡业科技有限公司 | 电动车头盔厂家_赠品头盔_安全帽批发_山东摩托车头盔—临沂承福头盔 | 金属软管_不锈钢金属软管_巩义市润达管道设备制造有限公司 | 工业冷却塔维修厂家_方形不锈钢工业凉水塔维修改造方案-广东康明节能空调有限公司 | 球磨机,节能球磨机价格,水泥球磨机厂家,粉煤灰球磨机-吉宏机械制造有限公司 | 软文发布-新闻发布推广平台-代写文章-网络广告营销-自助发稿公司媒介星 | 青州开防盗门锁-配汽车芯片钥匙-保险箱钥匙-吉祥修锁店 | 间苯二酚,间苯二酚厂家-淄博双和化工 |