点击发送验证码按钮出现60S倒计时

点击发送验证码设置60S倒计时时间

<!--Html-->
<input type="text" id="telephone" name="telephone" placeholder="手机号"/>
<input type="text" value="" name="checkedcode" placeholder="请输入验证码"/>
<input type="button" onclick="sendCode(this)" value="获取验证码" />

<!--JS代码-->
<script type="text/javascript">
    //定义变量
var clock = '';
var nums = 60;
var btn;
function sendCode(thisBtn) {
    //判断手机号是否合法
    
    //获取用户输入的手机号
    var tel = $("#telephone").val();
    //通过正则表达式匹配
    //手机号的正则表达式
    var reg = /^1[3,4,5,7,8,][0-9]{9}$/;
    //匹配
    var flag = reg.test(tel);
    if(!flag){
        alert("手机号输入格式错误!");
        return;
    }
    //调用服务端发送短信服务,给用户发送短信验证码
    $.ajax({
        //发送短信的请求方式
        type: "GET",
        //路径
        url: "/regist/sendSms",
        //传到后台的参数
        data: {"telephone":tel},
        //返回结果
        success:function(){}
    });


    btn = thisBtn;
    btn.disabled = true; //将按钮置为不可点击
    btn.value = nums + '秒后重新获取';
    clock = setInterval(doLoop, 1000); //一秒执行一次,这是一个定时器

}
function doLoop() {
    nums--;
    if (nums > 0) {
        btn.value = nums + '秒后重新获取';
    } else {
        clearInterval(clock); //清除js定时器
        btn.disabled = false;
        btn.value = '重新获取验证码';
        nums = 60; //重置时间
    }
}
</script>
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值