JQuery与JS实现倒计时
2015-07-21 15:56
656 查看
JQuery版:
JS版:
基于Cookie的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 validate 验证一个单独的表单元素
- jquery 遍历dom元素
- jquery性能优化的十种方法
- jQuery blockUI插件在ajax提交的时候的用处
- 左边部分添加到右边
- jquery.validate详解二
- jquery.validate详解一
- jquery
- 全选,不选,输出选中的值
- jquery中的$().each和$.each的区别
- 发展简史jQuery时间轴特效
- 使用jQuery 把一个JSP文件中的所有id名字替换成以b开头,再加上原来的名字(首字母变为大写)
- jquery 插件封装总结
- jQuery中对select下拉框的基本操作
- jQuery ZeroClipboard中Flash定位不准确的解决方案
- JQuery UI datepicker在选择startDate与endDate时手动清空数据后,时间选择依然有限制问题!
- jquery 模糊匹配问题记录
- jquery实现Ctrl+Enter提交表单的方法
- 带在线客服返回顶部的jquery右下角弹出菜单-代码
- jquery中filter的使用