js發送驗證碼倒計時效果

HTML代碼

<div id="code-div"><span id="code-text">獲取驗證碼</span></div>

 JS代碼

var timer;//定時器
	var time = 6;//倒計時時間
	var isUse = false;//阻止按鈕重複點擊
	$(function(){
		
		//獲取驗證碼
		$("#code-div").click(function() {
			if(isUse) { return false;}
			isUse = true;
			$("#code-text").text("重新發送(6秒)");
			timer = setInterval("codeTime()",1000);
		});
	});
	
	function codeTime() {
		time--;
		$("#code-text").text("重新發送("+time+"秒)");
		if(time<0) {//倒計時結束
			window.clearInterval(timer);//清除定時器
			$("#code-text").text("獲取驗證碼");//值重置
			isUse = false;//值重置
			time = 6;//值重置
		}
	}

 效果

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章