JQuery与JS实现倒计时

JQuery版:

var wait = 60;
function RemainTime(o) {
	if (wait == 0) {
		$(o).removeAttr("disabled");
		$(o).text("获取验证码");
		wait = 60; //设置按钮可操作的等待时间
	} else {
		$(o).attr("disabled", true);
		$(o).text("重新获取(" + wait + ")");
		wait--;
		setTimeout(function() {
			time(o)
		}, 1000)
	}
}
调用方式:

//倒计时
time($("#getPhoneCode"));

JS版:

var wait = 60;
function RemainTime(o) {
	if (wait == 0) {
		o.removeAttribute("disabled");
		o.value="获取验证码";
		wait = 60; //设置按钮可操作的等待时间
	} else {
		o.setAttribute("disabled", true); 
		o.value= "重新获取(" + wait + ")"; 
		wait--;
		setTimeout(function() {
			time(o)
		}, 1000)
	}
}
调用方式:

function buttonClick(o){
	RemainTime(o);
}

基于Cookie的JQuery版:

var phone_code_interval_time = 60; //发送手机验证码时间间隔,单位:秒
var wait = getCookie("phone_code_wait_time");
if (wait > 0) {
	time($("#getPhoneCode"));
}
function RemainTime(o) {
	if (wait == 0) {
		$(o).removeAttr("disabled");
		$(o).text("获取验证码");
		setCookie("phone_code_wait_time", 0, 0, ''); //设置按钮可操作的等待时间
	} else {
		$(o).attr("disabled", true);
		$(o).text("重新获取(" + wait + ")");
		wait--;
		setTimeout(function() {
			time(o)
		}, 1000)
	}
}

// 设置cookie
function setCookie(name, value, seconds, domain) {
	seconds = seconds || 0; // seconds有值就直接赋值,没有为0,这个根php不一样。
	var expires = "";

	if (seconds != 0) { // 设置cookie生存时间
		var date = new Date();
		date.setTime(date.getTime() + (seconds * 1000));
		expires = "; expires=" + date.toGMTString();
	}
	if (domain != null && domain != undefined && domain != '') {
		domain = ';domain=' + domain;
	} else {
		domain = '';
	}
	document.cookie = name + "=" + escape(value) + expires + "; path=/"
			+ domain; // 转码并赋值
}

// 取得cookie
function getCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';'); // 把cookie分割成组
	for (var i = 0; i < ca.length; i++) {
		var c = ca[i]; // 取得字符串
		while (c.charAt(0) == ' ') { // 判断一下字符串有没有前导空格
			c = c.substring(1, c.length); // 有的话,从第二位开始取
		}
		if (c.indexOf(nameEQ) == 0) { // 如果含有我们要的name
			return unescape(c.substring(nameEQ.length, c.length)); // 解码并截取我们要值
		}
	}
	return false;
}

调用方式:

time($("#getPhoneCode"));









你可能感兴趣的:(Jquery,&,JavaScript)