<!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. flex宽度总结

    flex宽度相关的属性有三个 flex-grow,flex-shrink,flex-basis.下面分别介绍其相关特点: flex-grow 扩大因子,主轴有剩余空间时,元素分配到剩余空间的比率 fl ...

  2. （转）关于Jackson2.x中com.fasterxml.jackson包的用法

    Jackson应该是目前最好的json解析工具了,之前一直用的是org.codehaus.jackson包中的工具,使用的 包是jackson-all-1.9.11.jar. 最近发现Jackson升 ...

  3. SystemServer分析

    1 SystemServer分析 SystemServer的进程名就是前面所说的“system_server”,是zygote进程“app_process”fork出来的第一个子嗣,其重要性不言而喻. ...

  4. nginx 变量 + lua

    nginx变量使用方法详解(8) nil.null与ngx.null 发现一个nginx LUA开发Web App的框架 nginx是个好东西, nginx的openrtsy发行版本更是个好东西. 今 ...

  5. bzoj 4009 接水果 整体二分

    Description 先给出一些盘子, 用路径x-y表示, 有权值 再有Q个询问, 表示水果, 用路径x-y表示 如果盘子是水果的子路径, 可以接住 对于每个水果, 输出可以接住它的盘子的第k小权 ...

  6. hdu 3613 KMP算法扩展

    Best Reward Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  7. 标准C程序设计七---66

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  8. os.system() 和 os.popen()

    1.os.popen(command[, mode[, bufsize]])  os.system(command) 2.os.popen() 功能强于os.system() , os.popen() ...

  9. STL之set的用法

    1.关于set 首先,set是关联容器,set作为一个容器是用来存储同一种数据类型的数据结构,基本功能与数组相似.不同的是,在set中每个元素的值都是唯一的.而且系统能够根据元素的值自动进行排序.但是 ...

  10. 牛客网 牛客练习赛11 D.求距离

    D.求距离 链接:https://www.nowcoder.com/acm/contest/59/D来源:牛客网 时间限制:C/C++ 1秒,其他语言2秒空间限制:C/C++ 32768K,其他语言6 ...