短信验证码定时效果

最新推荐文章于 2023-03-14 11:56:42 发布

兔子羊

最新推荐文章于 2023-03-14 11:56:42 发布

阅读量190

点赞数 1

分类专栏：前端效果文章标签： jquery

前端效果专栏收录该内容

1 篇文章 0 订阅

订阅专栏

来一个点击发送验证码，并实现倒计时功能，

jsp代码：

注意下路径与自己的匹配，点击发送验证码会有一个URL请求，然后可以替换成自己的，就OK了。。

<input type="text" id="phone" placeholder="请输入手机号码">
<input id="getCode" type="button" value="获取验证码"><br>

$(function(){
        $("#getCode").removeAttr("disabled");
           alert("验证码发送成功，收到后请输入验证码");
           time(this);
    })

    //验证码倒计时
    var wait = 120;
    function time(obj) {
        if(wait==0) {
            $("#getCode").removeAttr("disabled");
            $("#getCode").val("获取验证码");
            wait = 120;
        }else {
            $("#getCode").attr("disabled","true");
            $("#getCode").val(wait+"秒后重试");
            wait--;
            setTimeout(function() {     //倒计时方法
                time(obj);
            },1000);    //间隔为1s
        }
    }