<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" />

<script type="text/javascript">

var countdown = 60;

function settime(obj) {

    if (countdown == 0) {

        obj.removeAttribute("disabled");

        obj.value="免费获取验证码";

        countdown = 60;

        return;

    } else {

        obj.setAttribute("disabled", true);

        obj.value="重新发送(" + countdown + ")";

        countdown--;

    }

setTimeout(function() {

    settime(obj) }

    ,1000)

}

</script>

</body>

</html>

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

<input id="second" type="button"  value="免费获取验证码"  />
//发送验证码时添加cookie

function 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<arrCookie.length;i++){

        var arr=arrCookie[i].split("=");

        if(arr[0]==name){

          return unescape(arr[1]);

          break;

        }else{

             return "";

             break;

         }

      } 

}
主要逻辑代码

$(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.oschina.net/code/snippet_2001568_48311

发送验证码60s倒计时实现的更多相关文章

  1. 6.短信验证码60s倒计时

    短信验证码60s倒计时 html: <input type="button"  class="btn btn-primary" value="免 ...

  2. 【积累】发送验证码按钮倒计时js

    注册的时候要发送验证码,就上网研究了一下,写了一个简单点的... jsp页面: <input type="button" id="testbtn" val ...

  3. js发送验证码（倒计时）

    需求:在用户点击获取验证码后60s内不能再次获取 代码 //倒计时60秒 var countdown=60; //显示获取验证码倒计时的文本标签 var _generate_code =$(" ...

  4. 验证码60s倒计时前端效果

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Android发送验证码的倒计时button

    1 直接上图 2 原理 原理非常easy,就是把对应的倒计时逻辑等封装到一个控件中,并向外部提供接口. 3 代码 import java.util.Timer; import java.util.Ti ...

  6. jQuery实现发送验证码30s倒计时，且刷新页面时有效

    在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...

  7. jQuery实现的手机发送验证码倒计时效果代码分享

    这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...

  8. 发送验证码倒计时60s

    var wait=60; function time(o) { if (wait == 0) { o.removeClass("gray"); o.text("发送验证码 ...

  9. React实战之60s倒计时按钮（发送短信验证按钮）

    React实战之60s倒计时按钮——短信验证按钮 导入:(antd组件——Form表单) import { Button, Form, Input } from 'antd'; const FormI ...

随机推荐

  1. 【bzoj1941】[Sdoi2010]Hide and Seek KD-tree

    题目描述 小猪iPig在PKU刚上完了无聊的猪性代数课,天资聪慧的iPig被这门对他来说无比简单的课弄得非常寂寞,为了消除寂寞感,他决定和他的好朋友giPi(鸡皮)玩一个更加寂寞的游戏---捉迷藏. ...

  2. Topcoder SRMCards ——贪心

    选择一个数x会删去x+1和x-1,问可以最多选多少次. 显然,对于一段连续的数列,贪心的从左向右选取是最优的. 然后就可以贪心的统计答案了. #include <map> #include ...

  3. BZOJ 4555 [Tjoi2016&Heoi2016]求和 ——分治 NTT 多项式求逆

    不想多说了,看网上的题解吧,我大概说下思路. 首先考察Stirling的意义,然后求出递推式,变成卷积的形式. 然后发现贡献是一定的,我们可以分治+NTT. 也可以直接求逆(我不会啊啊啊啊啊) #in ...

  4. linux下安装firefox

    首先检查系统有没有安装:rpm -qa|grep firefox 如果有安装,先删掉rpm -e * firefox不同版本下载:http://liulanmi.com/firefox 具体方法如下: ...

  5. charles 抓包工具破解方法

    在线破解地址: https://www.zzzmode.com/mytools/charles/ 之后将下载的jar包替换  charles.app ->右键显示包内容 ->content ...

  6. [转] 细说linux挂载——mount

    转载的文章不能分类 这点比较坑   暂时先发到随笔里了 标题会标注的 找到一篇写的对挂载比较好的文章  收藏ing 作者:adagio   Ubuntu社区 原帖网址:http://forum.ubu ...

  7. FZOJ Problem 2110 Star

                                                                                                        ...

  8. JAVA特性面试题：

    1.简要介绍java程序的健壮性. 答:JAVA程序会在编译和运行的时候自动的检测可能出现的错误,而且它是一种强类型语言,对于类型的检查很严格,而且它的垃圾回收机制也有效的避免了内存的泄漏. 2.为什 ...

  9. 正确使用‘trap指令’实现Docker优雅退出

    一般应用(比如mariadb)都会有一个退出命令,用户使用类似systemctl stop ****.service方法,停止其服务时,systemd会调用其配置文件注册的退出命令,该命令执行清理资源 ...

  10. poj 2253(kruskal)

    Frogger Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 34968   Accepted: 11235 Descrip ...