<!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. [BZOJ2678][Usaco2012 Open]Bookshelf

    P.S. 偶然间发现可以用 markdown... [BZOJ2678][Usaco2012 Open]Bookshelf 试题描述 When Farmer John isn't milking co ...

  2. 学习 WebService 第四步：利用WSDL（URL）生成WebService客户端<初级>

    我用的是最简单的方法,利用jdk的命令wsimport -keep -p 包路径 -d 代码存放位置 WSDL网址 蓝色是命令,粉色是存放位置,橘色是URL C:\Program Files\IBM\ ...

  3. bootstrap 事件shown.bs.modal用于监听并执行你自己的代码【写hostmanger关联部门遇到的问题及解决方法】

    背景:记录写hostmanger中用户下拉框关联部门遇到的问题及解决方法 问题:需求是展示页面展示用户所属的部门,点击修改按钮后,弹出对应的model,这个时候部门的select要默认选中用户所在的s ...

  4. 按 Tab 在多个 InputField 间切换

    下面这个链接里的有些unity的东西还没搞懂..改天继续看 http://forum.unity3d.com/threads/tab-between-input-fields.263779/ if(I ...

  5. python算法与数据结构-顺序表(37)

    1.顺序表介绍 顺序表是最简单的一种线性结构,逻辑上相邻的数据在计算机内的存储位置也是相邻的,可以快速定位第几个元素,中间不允许有空,所以插入.删除时需要移动大量元素.顺序表可以分配一段连续的存储空间 ...

  6. Linux 虚拟地址与物理地址的映射关系分析【转】

    转自:http://blog.csdn.net/ordeder/article/details/41630945 版权声明:本文为博主(http://blog.csdn.net/ordeder)原创文 ...

  7. yii框架缓存知识总结(转载)

    缓存是用于提升网站性能的一种即简单又有效的途径.稍微有点规模的网站都会通过存储相对静态的数据至缓存以备所需,这样我们可以省去从数据库查询然后生成这些数据的时间,通过减轻数据库的压力从而提升网站的性能. ...

  8. TextReader 和StreamReader

    TextReader 和StreamReader 目录: 为什么要介绍 TextReader? TextReader的常用属性和方法 TextReader 示例 从StreamReader想到多态 简 ...

  9. poj 1573(搜索)

    Robot Motion Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 12351   Accepted: 5982 Des ...

  10. LeetCode OJ-- Spiral Matrix

    https://oj.leetcode.com/problems/spiral-matrix/ 螺旋矩阵,逆着转,输出矩阵中的元素. 在纸上模仿,然后记左上角(l1,l2)右上角(l1,r2),左下角 ...