为了账号安全,请及时绑定邮箱和手机立即绑定

JavaScript短信验证码60秒倒计时插件

2019.05.14 15:57 297浏览

该插件依赖于jquery,用于发送短信验证码后的60秒倒计时:

image

下载完整代码: 下载

下载后的完整实例包括:

image

插件完整源码

countdown.js:

$(function(){
	$(".captchaBtn").html('获取验证码').on("click", function(){
         var that = $(this);
		 var seconds = 60;
		 that.attr("disabled", true);
		 that.html(seconds+'秒');
	     let promise = new Promise((resolve, reject) => {
	      let setTimer = setInterval(
	        () => {
	          seconds -= 1;
	          // console.info('倒计时:' + seconds);
	          that.html(seconds+'秒');
	          if (seconds <= 0) {
	          	that.html('获取验证码');
	            resolve(setTimer)
	          }
	        }
	        , 1000)
	    })
	    promise.then((setTimer) => {
	       // console.info('清除');
	      clearInterval(setTimer);
	      that.attr("disabled", false);
	    })   
 
	})
});

如何使用

  1. 引入插件
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="jquery-2.1.1.min.js" type="text/javascript"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="countdown.js" type="text/javascript"></script>

需要依赖jquery

  1. 在"获取验证码"按钮上添加 class=“captchaBtn”
<button class="captchaBtn"></button>

ok,使用非常简单

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 邀请有奖 帮助中心 APP下载
官方微信

举报

0/150
提交
取消