基础验证码===

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/util.js"></script>
    <script>
        let n;
        onload = () => {
            let input = $(".code")[0];
            let btn = $("button")[0];
            let sp = $("span");
            let sp1 = sp[0];
            let sp2 = sp[1];
            //点击开始倒数
            btn.onclick = () => {
                input.value = "";
                sp2.innerHTML = "";
                sp2.style.color = "black";
                //禁用按钮
                btn.disabled = true;
                sp1.innerHTML = getRandomCode();
                //执行倒计时
                let count = 60;
                let n = setInterval(() => {
                    sp2.innerHTML = count + "秒后重新获取！";
                    count--;
                    if (count === -1) {
                        clearInterval(n);
                        btn.disabled = false;
                        sp2.innerHTML = "重新获取!";
                    }
                    arrNum.push(n);
                }, 1000);
            };

            //光标从input中移出
            input.onblur = () => {
                let v = input.value;
                let v2 = sp1.innerText;
                if (v === v2) {
                    sp2.innerHTML = "验证码输入正确！";
                    sp2.style.color = "green";
                } else {
                    sp2.innerHTML = "验证码输入错误！";
                    sp2.style.color = "red";
                    btn.disabled = false;
                }
                for (let i = 0; i < arrNum.length; i++) {
                    clearInterval(arrNum[i]);
                }
            };
        };
    </script>
</head>
<body>
<div>
    <input type="text" name="code" class="code" placeholder="请输入验证码"/>
    <button>点击获得验证码</button>
    <span></span>
    <span></span>
</div>
</body>
</html>
猜你喜欢
