淘宝防黑！！

最新推荐文章于 2024-10-16 23:00:23 发布

憨批小白白

最新推荐文章于 2024-10-16 23:00:23 发布

阅读量546

点赞数 1

文章标签： css3 css javascript

本文链接：https://blog.csdn.net/A1609926242/article/details/125616664

版权

淘宝防黑！！

效果图：

在这里插入图片描述

完整代码


<!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>
        .top{
            margin: 0 auto;
            width: 1000px;
            height: 500px;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            display: flex;
            /* 默认水平（本身就是水平） */
            justify-content: center;
            /* 横轴*/
            align-items: center;
            /* 纵轴 */
        }
        .login{
            float: right;
            border: 1px solid red;
            width: 600px;
            height: 300px;
            text-align: center;
            display: flex;
            flex-direction: column;
            /* 变成纵向排列 */
            align-items: center;
            /* 横轴 */
            justify-content: center;
            /* 纵轴居中 */
        }
        .login span{
            color: cornflowerblue;
            cursor:pointer;
        }
        button{
            width: 80px;
            margin-top: 20px;
        }
    </style>
    <script>
        window.onload=function(){
            var yzmimg=document.getElementById("yzmimg");
            var font=document.getElementById("font");
            var yzm=document.getElementById("yzm");
            var reminder=document.getElementById("reminder");
            var submit=document.getElementById("submit");
            var yzmnumber='';
            var yzmhtml='';
            // 随机图片 封装成一个函数
           function showYzm(){
            var str='0123456789';
            // 每次点击清空前一次的随机数和图片
            yzmhtml='';
            yzmnumber='';
            for(var i=1;i<=6;i++){
                var position=Math.floor(Math.random()*10);
                yzmnumber+=str.substr(position,1);
                // console.log(yzmnumber);
                yzmhtml += "<img style='width:30px;' src='images/"+str.substr(position,1)+".gif'>";
            }
            yzmimg.innerHTML=yzmhtml;
           }
           showYzm();
            // 更换随机数 事件绑定也就是把函数赋值给事件对象
            font.onclick=showYzm;
            // 获取用户输入的值
            submit.onclick=function(){
                var Myval=yzm.value;
                // console.log(Myval,yzmnumber);
                if(Myval==yzmnumber){
                    alert('验证通过');
                    window.open('a.html');
                }else{
                    reminder.innerHTML='验证码不正确';
                    yzm.value='';                   
                }
                // console.log(yzmnumber);
                // console.log(Myval);
            }
            

        }
    </script>
</head>
<body>
    <div class="top">
        <img src="images/people.png" alt="">
        <div class="login">
            <p>发现您的网络有异常，为保证正常使用，请验证.</p>
            <div id="yzmimg"></div>
            <div>看不清？<span id="font">换一张</span></div>
            <!-- <a href="javascript:;">看不清？换一个</a>空链接写法 -->
            <div style="margin-top:30px ;">
                验证码：
                <input type="text" id="yzm" style="border:1px solid #000 ;">
            </div>
            <div id="reminder"></div>
            <button type="submit" id="submit" action="">提交</button>
        </div>
    </div>
    <div class="bottom"></div>
</body>
</html>