04.demo 验证码演示图需求验证码发送倒计时输入正确验证码提交会有对话框弹出代码部分-----------

演示图

验证码 -original-original.gif

需求

验证码发送倒计时

输入正确验证码提交会有对话框弹出

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #inpu{
            width: 100px;
        }
        #sub{
            margin-top: 10px;
        }
        body{
            margin-left: 300px;
        }
    </style>
</head>
<body>
    
    <input id="inpu" type="text" value="">
    <button id="sent">发送</button>
    <br>
    <input id="sub" type="submit" disabled="disabled">
</body>
    <script>
        
        var osent=document.getElementById("sent")
        osent.onclick=function(){
            osent.disabled="disabled"
            //点击后禁用
            var time =60;  
            var timer = setInterval(fun1, 1000);  //设置定时器 
            function fun1() { 
                time--; 
                if(time>=0) { 
                 osent.innerHTML = time + "s后重新发送";
                 } 
            } 

            var osub=document.getElementById("sub")
            osub.removeAttribute("disabled")
            osub.onclick=function(){
                if(document.getElementById("inpu").value==="0218")
                alert("验证码输入正确")
                else{
                    alert("输入错误请重新输入")
                }

            }
           
        }
        
    </script>
</html>