您的位置:首页 > Web前端 > JQuery

JQuery与JS实现倒计时

2015-07-21 15:56 656 查看
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"));
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: