【实用随记】倒计时（验证码）

最新推荐文章于 2019-12-31 16:44:45 发布

兔小几

最新推荐文章于 2019-12-31 16:44:45 发布

阅读量415

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/mercury8862/article/details/41649267

本文介绍了一种基于JavaScript的验证码倒计时功能实现方法，通过设置定时器控制按钮状态和显示文本，实现用户在获取验证码后的指定时间内无法重复请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <div id="btnSendCode" onclick="sendMessage();">获取验证码</div>

    var InterValObj; //timer变量，控制时间
    var count = 120; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    function sendMessage(){ 
        $("#btnSendCode").attr("onclick", "");
        $("#btnSendCode").css("cursor", "default");
        curCount = count;
        //设置button效果，开始计时               
        $("#btnSendCode").css("color", "#c9c9c9");
        $("#btnSendCode").text("正在发送(" + curCount + ")");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
    }
   function SetRemainTime() {
        if (curCount == 0) {                
            window.clearInterval(InterValObj);//停止计时器
            $("#btnSendCode").css("color", "");
             $("#btnSendCode").attr("onclick", "sendMessage()");
             $("#btnSendCode").text("重新获取(120)");
        }
        else {
            curCount--;
            $("#btnSendCode").text("正在发送(" + curCount + ")");
        }
    }