js做一个简单验证码功能

最新推荐文章于 2023-03-13 17:18:11 发布

Fresh-eyes

最新推荐文章于 2023-03-13 17:18:11 发布

阅读量165

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_18831583/article/details/122075052

版权

<!DOCTYPE html>
<html>
    <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>验证码</title>
    </head>

    <style>
        *{
            margin: 0;
            padding:0;
            user-select: none;
            box-sizing: border-box;
        }
        .box {
            width: 200px;
            margin: 15px auto;
        }
        .box1 {
            width: 200px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 30px;
            background-color: rgba(127, 0, 255, .5);
            color: aliceblue;
        }
        input {
            outline: none;
            width: 200px;
            height: 20px;
            margin: 5px 0;
            text-indent: 5px;
        }
        button {
            width: 200px;
            height: 40px;
        }

        p {
            position: absolute;
            width: 200px;
            top: 68px;
            right: 250px;
            text-align: left;
        }
        
        .r {
            color: red;
        }

        .g {
            color: green;
        }

    </style>


    <body>  
         <div class="box">
             <div class="box1">123</div>
            
             <input type="text"><br>
             <p></p>
             <button>验证</button>
         </div>

         <script>
            var btn = document.querySelector('button')
            var ipt = document.querySelector('input')
            var div = document.querySelector('.box1')
            var p = document.querySelector('p')

            div.innerHTML = Math.random().toString(36).substr(2).slice(0,4)
            
            div.onclick = function(){
                div.innerHTML = Math.random().toString(36).substr(2).slice(0,4)
            };

            btn.onclick = function(){
                if (ipt.value == div.innerHTML){
                    p.innerHTML = '验证成功';
                    p.className = 'g';
                } else {
                    p.innerHTML = '验证失败';
                    p.className = 'r';
                }
            }


         </script>
    </body>

</html>