短信验证js 倒计时效果

    <script type="text/javascript">  
/*-------------------------------------------*/  
var InterValObj; //timer变量,控制时间  
var count = 120; //间隔函数,1秒执行  
var curCount;//当前剩余秒数  
//var code = ""; //验证码  
var codeLength = 6;//验证码长度  
function sendMessage() {  

 
    var phone=$("#phone").val();//手机号码  
   // var code=$("#code").val();//手机号码  
    //验证手机号
     var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
    curCount = count;  
    if(reg.test(phone)){  
        //产生验证码  
     //   for (var i = 0; i < codeLength; i++) {  
     //       code += parseInt(Math.random() * 9).toString();  
    //    }  
        //设置button效果,开始计时  
        $("#btnSendCode").attr("disabled", "true");  
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次  
    //向后台发送处理数据  
                  $.ajax({
                type : 'POST',
                url : "<%=basePath%>"+ '/sendMsgAjaxEm0020.action',
                data : {
                    phone:phone
                },
                success : function(data) {
                var  result=eval('(' + data + ')');
                    if (result.data=="success") {
                            document.getElementById('phone').disabled=true;
                            document.getElementById('btnSubmit').style.display = "";
                        }else{
                            document.getElementById('phone').disabled=false;
                            window.clearInterval(InterValObj);//停止计时器  
                              $("#btnSendCode").removeAttr("disabled");//启用按钮  
                            $("#btnSendCode").val("发送验证码");  
                            alert(result.data);
                        
                        }
                    }
                });
    }else{  
        alert("手机号码不能为空!");  
    }  
}  
//timer处理函数  
function SetRemainTime() {  
    if (curCount == 0) {                  
        window.clearInterval(InterValObj);//停止计时器  
        $("#btnSendCode").removeAttr("disabled");//启用按钮  
        $("#btnSendCode").val("重新发送验证码");  
       // code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效      
    }  
    else {  
        curCount--;  
        $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");  
    }  
}  

</script>

-----------------------------------div-------------------------------------------------

<div style="margin-left:200px;margin-top:30px" id="msg">
     
                <div style="margin-top:10px" >
                    <font color="red">*</font>手机号码:  
                </div>  
                <div>  
                    <input type="text" id="phone" name="phone"/>  
                </div>  
                <div>  
                    <font color="red">*</font>验证码:  
                </div>  
                <div>  
                    <input type="text" id="code" name="code" size="6"/>  
                    <input id="btnSendCode" type="button" value="发送验证码" οnclick="sendMessage()" />  
                    <input id="btnSubmit" class="btnSubmit" style="font-size:14px;display:none" type="button"  value="确定绑定" οnclick="checkCode()" />  
                </div>  
                </div>
            </c:if>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值