商务网站建设论文总结,wordpress 编辑 插件,网站内容建设的核心和根本是,做片头 网站需求#xff1a;发送验证码#xff0c;每60s可点击发送一次#xff0c;倒计时中按钮不可点击#xff0c;且刷新页面倒计时不会重置
可用以下方式避免刷新页面时#xff0c;倒计时重置
localStorage本地缓存方式
思路#xff1a; 1.记录倒计时的时间 2.页面加载时…需求发送验证码每60s可点击发送一次倒计时中按钮不可点击且刷新页面倒计时不会重置
可用以下方式避免刷新页面时倒计时重置
localStorage本地缓存方式
思路 1.记录倒计时的时间 2.页面加载时刷新页面时先获取存储的时间 3.判断存储的时间 不存在则正常初始化 大于1则将存储的时间数字赋值给时间变量继续执行倒计时 小于1则正常初始化
button clickgetCode{{timeText}}/spandata(){return {timeText: 获取验证码,canSend: true, //是否可发送验证码time: 60, }
}methods: {getCode(){this.handleCountDownTime()},//处理倒计时 和 按钮点击状态handleCountDownTime(){let timer setInterval(() {if (this.time 1 this.time 60) {this.time this.time - 1this.canSend falsethis.timeText ${this.time} s后获取//每次刷新纪录一次 倒计时的时间localStorage.setItem(countDownTime,new Date().getTime())} else {this.time 60this.canSend truethis.timeText 获取验证码clearInterval(timer)localStorage.removeItem(countDownTime}}, 1000)}
},created(){let countDownTime localStorage.getItem(countDownTime)if(countDownTime countDownTime 1){this.time countDownTime //剩下的需要计时的秒数this.handleCountDownTime()}
}注意记得在登陆成功或者进行后续操作后把缓存清掉
