博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
发送验证码60s倒计时实现
阅读量:5159 次
发布时间:2019-06-13

本文共 2592 字,大约阅读时间需要 8 分钟。

    
Title

这个只是一种比较简单的实现方式(页面刷新就会失效,不过还有一种无视页面刷新的)

//发送验证码时添加cookiefunction addCookie(name,value,expiresHours){     var cookieString=name+"="+escape(value);     //判断是否设置过期时间,0代表关闭浏览器时失效    if(expiresHours>0){         var date=new Date();         date.setTime(date.getTime()+expiresHours*1000);         cookieString=cookieString+";expires=" + date.toUTCString();     }         document.cookie=cookieString; } //修改cookie的值function editCookie(name,value,expiresHours){     var cookieString=name+"="+escape(value);     if(expiresHours>0){       var date=new Date();       date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒      cookieString=cookieString+";expires=" + date.toGMTString();     }       document.cookie=cookieString; } //根据名字获取cookie的值function getCookieValue(name){       var strCookie=document.cookie;       var arrCookie=strCookie.split("; ");       for(var i=0;i
主要逻辑代码$(function(){    $("#second").click(function (){        sendCode($("#second"));    });    v = getCookieValue("secondsremained");//获取cookie值    if(v>0){        settime($("#second"));//开始倒计时    }})//发送验证码function sendCode(obj){    var phonenum = $("#phonenum").val();    var result = isPhoneNum();    if(result){        doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});        addCookie("secondsremained",60,60);//添加cookie记录,有效时间60s        settime(obj);//开始倒计时    }}//将手机利用ajax提交到后台的发短信接口function doPostBack(url,backFunc,queryParam) {    $.ajax({        async : false,        cache : false,        type : 'POST',        url : url,// 请求的action路径        data:queryParam,        error : function() {// 请求失败处理函数        },        success : backFunc    });}function backFunc1(data){    var d = $.parseJSON(data);    if(!d.success){        alert(d.msg);    }else{//返回验证码        alert("模拟验证码:"+d.msg);        $("#code").val(d.msg);    }}//开始倒计时var countdown;function settime(obj) {     countdown=getCookieValue("secondsremained");    if (countdown == 0) {         obj.removeAttr("disabled");            obj.val("免费获取验证码");         return;    } else {         obj.attr("disabled", true);         obj.val("重新发送(" + countdown + ")");         countdown--;        editCookie("secondsremained",countdown,countdown+1);    }     setTimeout(function() { settime(obj) },1000) //每1000毫秒执行一次} //校验手机号是否合法function isPhoneNum(){    var phonenum = $("#phonenum").val();    var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;     if(!myreg.test(phonenum)){         alert('请输入有效的手机号码!');         return false;     }else{        return true;    }}

参考链接:

 

转载于:https://www.cnblogs.com/52-qq/p/8963480.html

你可能感兴趣的文章
号外!GNOME 3.22 正式发布喽!!!
查看>>
[USACO2003][poj2018]Best Cow Fences(数形结合+单调队列维护)
查看>>
JS调用后台方法大全
查看>>
一种脱离VC编程软件的方法学习C/C++编程(搭建EditPlus实现在文本编辑框中执行.c文件...
查看>>
[科普文] 关于浏览器内核的一些小知识,明明白白选浏览器!
查看>>
软硬件之共生之道——一千零一夜的启发
查看>>
(一一二)图文混排中特殊文字的点击与事件处理
查看>>
iPhone开发经典语录集锦 (转)
查看>>
SVM基础必备常识
查看>>
FPGA时序约束的几种方法 (转)
查看>>
cocos2dx 3.x tolua 分析
查看>>
oracle 外网访问
查看>>
jdbc连接数据库方式问题
查看>>
一步一回头撞在了南墙上
查看>>
POJ2965 The Pilots Brothers' refrigerator
查看>>
C# 2.0 中的新增功能01 分布类与分部方法
查看>>
关于腾讯ip接口一个流传很广的错误用法
查看>>
XMU 1056 瞌睡 vs 听课 【动态规划】
查看>>
openlayers3中应用proj4js
查看>>
leaflet一个前端gis框架,比openlayer更简单
查看>>