<!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. NOJ——1665夜神的思考（YY+组合问题+分类讨论）

    [1665] 夜神的思考 时间限制: 1000 ms 内存限制: 65535 K 问题描述 最近夜神对二进制很感兴趣,于是他每次看到一串只包含1和0的字符串的时候就会想,这串字符串有多少子串是含有k个 ...

  2. [POI2005]SKA-Piggy Banks (Tarjan缩点)

    题目链接 Solution \(Tarjan\) 缩点乱搞. 考虑到环内如果有一个被打开,那么也就全部打开了. 然后很显然入度为 \(0\) 的点需要被砸破. 所以缩点之后找到入度为 \(0\) 的即 ...

  3. 网络流(自行理解的Dinic)

    自行理解的Dinic 注释即讲解 #include<bits/stdc++.h> ; using namespace std; int read() { ,w=; ;ch=getchar( ...

  4. Python图像处理库PIL从入门到精通

    https://blog.csdn.net/column/details/pythonpil.html 示例: from PIL import Image import pytesseract pyt ...

  5. linux内核设计与实现第一章

    1.1 unix的历史 Thompson实现unix 伯克利大学对其进一步开发推出了著名的BSD 其他各大厂商相继推出自己的unix 1.1.2 unix的特性 unix系统是一个强大,健壮,稳定的操 ...

  6. vue v-on:click传递动态参数

    最近项目中要为一个循环列表动态传送当前点击列的数据,查了很久资料也没有一个完美的解决方案, 新手只能用vue的事件处理器与jquery的选择器做了一个不伦不类的方案,居然也能解决这个问题,作此记录留待 ...

  7. Network | parity bit

    奇偶校验位是一个表示给定位数的二进制数中1的个数是奇数还是偶数的二进制数.奇偶校验位是最简单的错误检测码. A parity bit, or check bit is a bit added to t ...

  8. SnakeYaml使用

    新的项目中需要将yaml文件解析为对象,调研了决定使用snakeYaml,下面看一看怎么使用. 一.引入依赖 因为项目是使用maven构建的,所以我们在pom文件中引入snakeYaml的依赖,如下: ...

  9. Android-Service基本用法、AIDL、Binder连接池详解

    本文介绍Service与Activity之间的通信,文章包含以下内容: 一.Service基本用法 二.通过AIDL实现Service与Activity跨进程通信 三.Binder连接池 四.使用Me ...

  10. Java中String/StringBuffer/StringBuilder区别（转）

    1.三者在执行速度方面的比较:StringBuilder >  StringBuffer  >  String 2.String <(StringBuffer,StringBuild ...