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);
});

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值