JS验证码demo效果思路代码 .main{ margin: auto; width:160px; } .gcode

效果

思路

微信图片_20231125170713.jpg

代码

 <style>
        .main{
            margin: auto;
            width:160px;
        }
        .gcode{
            width: 100%;
            height: 40px;
            background: url(./下载.jpg);
            background-size:100% ;
            text-align: center;
            line-height: 40px;
            font-size: 16pt;
            letter-spacing: 10px;
            /* 斜体 */
            font-style: italic;
            /* 鼠标悬停时变小手 */
            cursor:pointer;
            /* 禁止直接复制验证码 */
            user-select: none;
        }
        #inp{
            width: 100%;
            /* 超出来了加个样式去掉 
            这个时去掉内边距和边框对盒子大小的影响*/
            box-sizing: border-box;
        }
        #cbt{
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="gcode"></div>
        <input type="text" id="inp" placeholder="请输入你的验证码">
        <button id="cbt">验证</button>
        <div class="msg"></div>
    </div>
<body>

//先取得所有元素
        var ecbt=document.querySelector(`#cbt`);
        var egcode = document.querySelector(`.gcode`);
        var einp = document.querySelector(`#inp`);
        var emsg = document.querySelector(`.msg`);


        //生成验证码函数，生成五位随机数字或小写字母
        var getcode = function(){
            //Math.random() 生成0~1的随机数字，小数位在16或17位
            //.toString(36) 转到36进制，因为36进制会包含所有小数和小写字母
            //substr（3，5）截取字符串，从第三位起往后取5位.前两位是0，所以只从第三位起
            var code =Math.random().toString(36).substr(3,5);
            //最后函数返回验证码
            return code;
        }
        //测试一下点击事件
        ecbt.onclick = function (){
            //加trim()是为了去掉输入框前后可能误打上去的空格
          if(egcode.innerHTML == einp.value.trim()){
            emsg.innerHTML = `验证成功`;
          }else{
            emsg.innerHTML = `验证失败` ;
          }
        }
        //点击验证码框一次就更换一次验证码
        egcode.onclick = function(){
            egcode.innerHTML = getcode();
        }
        //网页载入的时候，就出验证码了
        egcode.click();