发送验证码后倒计时

最新推荐文章于 2024-02-07 17:14:57 发布

尘中客

最新推荐文章于 2024-02-07 17:14:57 发布

阅读量476

点赞数

分类专栏： jscript 文章标签：验证码倒计时手机 jscript

本文链接：https://blog.csdn.net/s371795639/article/details/60332031

版权

jscript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<div class="form-group">
    <input id="btnSendCode"  type="button" class="button button-block bg-main text-big" value="发送验证码" οnclick="sendMessage()" />
</div>

<script >

    /*-------------------------------------------*/
   var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    var code = ""; //验证码
    var codeLength = 6;//验证码长度

    function sendMessage() {

        curCount = count;
            //设置button效果，开始计时
         $("#btnSendCode").css("background-color", "LightSkyBlue");
            $("#btnSendCode").attr("disabled", "true");
            $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
            InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次

            //向后台发送处理数据
    }
    //timer处理函数
    function SetRemainTime() {

        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#btnSendCode").removeAttr("disabled");//启用按钮
            $("#btnSendCode").css("background-color", "");
            $("#btnSendCode").val("重新发送验证码");
            code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
        }
        else {
            curCount--;
            $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
        }
    }
</script>