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;//值重置
		}
	}

 效果

 

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