<!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. [HAOI2007] 理想的正方形 (单调队列)

    题目链接 Solution MD,经过这道题,算是掌握单调队列了... 可以先预处理出点 \((i,j)\) 往上 \(n\) 的最大值和最小值. 然后再横着做一遍单调队列即可. Code #incl ...

  2. QTREE系列题目总结

    $QTREE$ 就是一套树上数据结构练习题. 这套题貌似来源于 $SPOJ$,我是在 $luogu$ 看到的. $QTREE1$ 题意 一棵 $n$ 个点的带边权树,要求支持 单边改权值 和 询问路径 ...

  3. vue当中设置全局变量的方法

    import fn from 'fn' Vue.prototype.fn = fn; 调用的时候 this.fn.way

  4. Spring Boot的web开发&静态资源配置方式

    Web开发的自动配置类:org.springframework.boot.autoconfigure.web.WebMvcAutoConfiguration 1.1. 自动配置的ViewResolve ...

  5. 系统虚拟内存的理解 转载自http://blog.csdn.net/do2jiang/article/details/4690967

    在进入正题前先来谈谈操作系统内存管理机制的发展历程,了解这些有利于我们更好的理解目前操作系统的内存管理机制. 一 早期的内存分配机制 在 早期的计算机中,要运行一个程序,会把这些程序全都装入内存,程序 ...

  6. guake使用

    1. 安装:sudo apt-get install guake 2. 在终端输入guake 3. f12:显示/隐藏 4. f11:全屏/正常屏切换 5. f2:重命名终端名 6. 还可以查看修改快 ...

  7. [CQOI2018] 社交网络

    题目背景 当今社会,在社交网络上看朋友的消息已经成为许多人生活的一部分.通常,一个用户在社交网络上发布一条消息(例如微博.状态.Tweet等) 后,他的好友们也可以看见这条消息,并可能转发.转发的消息 ...

  8. Java随机数技巧-新手篇

    package 向家康; import java.util.concurrent.ThreadLocalRandom; public class 练习21 { public static void m ...

  9. 一个能让你了解所有函数调用顺序的Android库

    http://mobile.51cto.com/android-536059.htm 原理 本库其实并没有什么黑科技,本库也没有java代码,核心就是2个build.gradle中的task.首先,原 ...

  10. Web地图服务、WMS 请求方式、网络地图服务（WMS）的三大操作

    转自奔跑的熊猫原文 Web地图服务.WMS 请求方式.网络地图服务(WMS)的三大操作 1.GeoServer(地理信息系统服务器) GeoServer是OpenGIS Web 服务器规范的 J2EE ...