在项目中需要使用到验证码功能时,点击获取验证码后,需要在一定的时间后才能再次获。,一般的使用的是普通的计时器,但是普通计时器会有一个缺陷:只要页面一刷新,就会重新计时,不能起到实际防止反复调用接口的作用。所以设计一个基于cookie的计时器,是很有必要的。


项目环境:

  • vue-cli
  • 插件:js-cookie
  • 按钮样式:semantic-ui

拟实现的功能:

  • 默认情况下,验证码按钮显示发送验证码

在这里插入图片描述

  • 点击获取验证码,按钮禁用,出现倒计时效果
    在这里插入图片描述
  • 此时,刷新页面,倒计时效果不会消失,直到倒计时完成
  • 倒计时结束,显示重新获取,按钮可以点击

在这里插入图片描述

具体与实现有关的代码:

  • 按钮的html:
<button class="ui button" id="sendPicCode" type="button" @click="sendCode" >发送验证码</button>
  • 引入js-cookie:
//引入调用js-cookie
import cookie from 'js-cookie'
  • sendcode方法中有关计时器的代码:
//倒计时60秒
this.LockButton('#sendPicCode', 60);
  • methods中的LockButton方法:
LockButton: function (btnObjId, locksecends) {
	var freezeEndTime = cookie.get("freezeEndTime");
	//cookie不存在
	if (freezeEndTime == null || freezeEndTime == undefined || freezeEndTime == 'undefined' || freezeEndTime == 'null') {
		var now = new Date().getTime();  //当前时间戳
  		var endtime = locksecends * 1000 + now;  //结束时间戳
  		cookie.set("freezeEndTime", endtime);  //将结束时间保存到cookie
	}
	//按钮 禁用 并 显示倒计时
	$(btnObjId).addClass('disabled').attr('disabled', 'disabled').text(  locksecends + 's');
	//开启计时器
    var timer = setInterval(function () {
		locksecends--;
		//显示倒计时
		$(btnObjId).addClass('disabled').attr('disabled', 'disabled').text(  locksecends + 's');
		//倒计时结束
		if (locksecends <= 0) {
			//倒计时结束清除cookie值
			cookie.remove("freezeEndTime", null);
			//使按钮可用,并更改字样
			$(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');
            //关闭计时器
            clearInterval(timer);
		}
	 }, 1000); 
},
  • vue的created方法中:
//读取cookie,如果存在cookie,且倒计时还未完成,继续完成倒计时
if (cookie.get("freezeEndTime") != undefined && !isNaN(cookie.get("freezeEndTime"))){  
	//读取到了cookie值
	var freezeEndTime = cookie.get("freezeEndTime");
	var now = new Date().getTime();  //当前时间戳
	var locksecends = parseInt((freezeEndTime - now) / 1000);//计算剩余时间
	if (locksecends <= 0) {
		//倒计时已经结束,清除cookie
		cookie.set("freezeEndTime", null);
	} else {
		this.LockButton('#sendPicCode', locksecends)
	}   
}
  • 细节:计时器里的文本显示也需要加上.addClass('disabled').attr('disabled', 'disabled').,原因是计时器开始后代码执行的情况是异步的,created方法完后,semantic渲染组件,又恢复成没有禁用的情况。所以需要在计时器里面进行再次添加禁用属性。

按上述步骤进行就能够实现所需的功能!


Logo

前往低代码交流专区

更多推荐