效果图

132.gif

代码

html

<span class="sendcode"><input id="sendcode" type="button" class="btn btn-default" value="获取验证码"/></span>

js

var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/; //手机号正则 
    var count = 60; //间隔函数，1秒执行
    var InterValObj1; //timer变量，控制时间
    var curCount1; //当前剩余秒数

function sendMessage1() {
        curCount1 = count;
        var phone = $.trim($('#tel').val());
        if(!phoneReg.test(phone)) {
            alert(" 请输入有效的手机号码");
            return false;
        }
        console.log('-------')
        //设置button效果，开始计时
        $("#sendcode").attr("disabled", "true");
        console.log($("#sendcode").val(+curCount1 + "秒再获取"))
        $("#sendcode").val(+curCount1 + "秒再获取");
        InterValObj1 = window.setInterval(SetRemainTime1, 1000); //启动计时器，1秒执行一次
        //向后台发送处理数据

    }

    function SetRemainTime1() {
        console.log('倒计时')
        if(curCount1 == 0) {
            window.clearInterval(InterValObj1); //停止计时器
            $("#sendcode").removeAttr("disabled"); //启用按钮
            $("#sendcode").val("重新发送");
        } else {
            curCount1--;
            $("#sendcode").val(+curCount1 + "秒再获取");
        }
    }