码迷,mamicode.com
首页 > 移动开发 > 详细

jQuery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码

时间:2015-07-22 13:23:04      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:jquery   验证码   短信   倒计时   

//发送短信验证码
    $(":button.getcode").click(function(){
    	var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
        if(!reg.test($("#mobile").val())){
        	$('#profile .error_mobile').css('display', 'inline');
            return false;
        }else{
        	$('#profile .error_mobile').hide();
        }
        var countdown = 60;
        var _this = $(this);
        //设置button效果,开始计时
        _this.attr("disabled", "true");
        _this.val(countdown + "秒后重新获取");
        //启动计时器,1秒执行一次
        var timer = setInterval(function(){
            if (countdown == 0) {                
                clearInterval(timer);//停止计时器
                _this.removeAttr("disabled");//启用按钮
                _this.val("重新发送验证码");
            }
            else {
                countdown--;
                _this.val(countdown + "秒后重新获取");
            }
        }, 1000);
        $.ajax({
            type : 'POST',
            url : '<%=path%>/user/sendCaptchas',
            dataType : 'json',
            data : {'stype':'3','ctype':'1','mobile':$("#mobile").val()},
            success : function(data) {
                if(data.errorInfo.errorCode==''){
                    /* alert("短信发送成功"); */
                }else{
                    alert(data.errorInfo.errorCode);
                }
            }
        });
        return false;
    });


<input class="getcode" type="button" value="免费发送验证码" />

版权声明:本文为博主原创文章,未经博主允许不得转载。

jQuery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码

标签:jquery   验证码   短信   倒计时   

原文地址:http://blog.csdn.net/lovesomnus/article/details/46999173

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!