HTML实现倒计时插件

HTML代码

            <div class="smallBox">
                <div>手机号</div>
                <div class="textinput">
                    <input type="text" name="mobile" id="mobile"  placeholder="请输入手机号" >
                    
                </div>
            </div>
            <div class="smallBox">
                <div class="code"><span>验证码</span> <span class="getCode" id="send">获取验证码</span></div>
                <div class="textinput">
                    <input type="text" name="code" placeholder="请输入验证码">
                </div>
            </div>

JS代码

$(".getCode").click(function () {
	var phone = $("input[name='mobile']").val();
	if(phone=='' || phone== null){
		layer.msg("请输入手机号!");
		return;
	}
	if(!phone.match(/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1})|(16[0-9]{1}))+\d{8})$/)) {
		 layer.msg("手机号码格式不正确!"); 
		 $("#mobile").focus(); 
		 return ; 
    } 
	//发送验证码
	$.ajax({
            type: "POST",//使用get方法访问后台或者post
            contentType: "application/json", //必须这样写
            dataType: "json",//返回json格式的数据
            url:"<%=basePath%>rest/userregister/getCode.cs?mobile="+phone,
            //data:JSON.stringify(data),//schoolList是你要提交是json字符串
       		success: function(data){//成功时会允许下面的函数,data为返回的数据,为数组类型
        	if(data.ret==1){
        		layer.msg("验证码发送成功");
        	}else{
        		layer.msg(data.msg);
        		$(".getCode").css("pointer-events", "auto");
	            clearInterval(timer);
	            $(".getCode").text("获取验证码");
        		return;
        	}    
        }
              
    });
	
	var time = 60;
    var timer = setInterval(function(){
        time--;
        $(".getCode").text("("+time+")");
        $(".getCode").css("pointer-events", "none");
        if(time==0){
        	$(".getCode").css("pointer-events", "auto");
            clearInterval(timer);
            $(".getCode").text("获取验证码");
        }
    },1000);
});

 


版权声明:本文为luo_Json原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。