JavaScript短信驗證碼60秒倒計時插件

該插件依賴於jquery,用於發送短信驗證碼後的60秒倒計時:javascript

下載完整代碼: 下載html

下載後的完整實例包括:java

插件完整源碼jquery

countdown.js:promise

$(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);
	    })   
 
	})
});複製代碼


如何使用bash

1. 引入插件app

<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="countdown.js" type="text/javascript"></script>複製代碼

須要依賴jquery
ui


2. 在"獲取驗證碼"按鈕上添加 class="captchaBtn"this

<button class="captchaBtn"></button>複製代碼


ok,使用很是簡單
spa

相關文章
相關標籤/搜索