js&jQuery 获取验证码

js获取验证码

html

 <form id="form">
            <input id="text" type="text" placeholder="请输入验证码" />
            <input id="btn" type="button" onclick="getCode(this)" value="获取验证码" />
        </form>

js

function getCode(btn) {
            let count = 60;
            setTime();
            //倒计时函数
            function setTime() {
                if (count == 0) {
                //当倒计时结束后按钮溢出disabled属性
                    btn.removeAttribute("disabled");
                    btn.value = "重新获取";
                    count = 60;
                    //这个return很关键，是当倒计时结束后结束这个倒计时函数的
                    return;
                } else {
                //在倒计时中，应该将按钮设置不可按的
                    btn.setAttribute("disabled", "true");
                    btn.value = count + "s后重新获取";
                    count--;
                }
                setTimeout(() => { setTime(); }, 1000);
            }
        }

效果图：

jQuery获取验证码

html

<form id="form">
        <input id="text" type="text" placeholder="请输入验证码" />
        <input id="btn" type="button" value="获取验证码" />
    </form>

jQuery

 $("#btn").click(function () {
            var count = 60;
            //jquery要用setInterval()定时器，因为这里不会调用倒计时函数，要循环执行
            var interval = setInterval(() => {
                if (count == 0) {
                    //因为button是<input>元素，所以这里要用.val()方法
                    $("#btn").val("重新获取").removeAttr("disabled");
                    count = 60;
                    //当倒计时结束，这里要清除定时器
                    clearTimeout(interval);
                } else {
                    $("#btn").val(count + "s后重新获取").attr("disabled", "disabled");
                    count--;
                }
            }, 1000);
        })