JS12---javascript实现验证码

最新推荐文章于 2023-04-04 21:31:55 发布

XIAO_YuBaby

最新推荐文章于 2023-04-04 21:31:55 发布

阅读量232

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/XIAO_YuBaby/article/details/100040214

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

本文介绍了一种使用HTML、CSS和JavaScript生成复杂验证码的方法，并详细解释了如何通过随机生成数字、字母和汉字来创建验证码，同时包括了字体大小、颜色和旋转角度的随机变化，以增加破解难度。此外，还提供了用户输入验证的实现方式。

摘要由CSDN通过智能技术生成

HTML内容

<style>
    .a {
        width: 200px;
        height: 50px;
        display: inline-block;
        border: solid 1px black;
        background: url("img/bg.png") no-repeat 100% 100%;
        text-align: center;
    }
    .a>span{
        display: inline-block;
    }

        .b{
            color: blue;
            font-size: 15px;
            cursor: pointer;
        }
        .c{
            outline: none;
        }
        .btn{
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div>
    <div class="a">
    </div>
    <span class="b">看不清楚.....</span>
    <div style="margin-top: 10px">
    <input type="text" class="c"/><button class="btn">确定</button>
    </div>
</div>

js内容

<script>
    /*
    * 一共出现6位
    * 随机生成数字0-9
    * */
    var a=document.getElementsByClassName("a")[0];
    var b=document.getElementsByClassName("b")[0];
    var btn=document.getElementsByClassName("btn")[0];
    var c=document.getElementsByClassName("c")[0];

    var str="";  //str作用  记录字符串，用来验证用户输入的字符串和验证码中的是否一致
    function show(){
        var ele = "";
        for(var i=0;i<6;i++){
            var char=Math.random();
            if(char<0.25){
                ele+=shuzi();
            }
            else if(char>0.25&&char<0.5){
                ele+=smallenglish();
            }
            else if(char>0.5&&char<0.75){
                ele+=bigenglish();
            }
            else{
                ele+=china();
            }
        }
        return ele;
    }

    function shuzi(){
          //字符串拼接
            var s=Math.floor(Math.random()*10);
            str+=s;
            var big=Math.random()*12+18;
            var mar=Math.random()*5+5;
            var colorful=randomcolor2();
            var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
            return"<span style='font-size: "+big+"px;margin:0 "+mar+"px;transform: rotatez("+angle+"deg);color:"+colorful+"'>"+s+"</span>";
    }

    function smallenglish(){
        var small=Math.floor( Math.random()*26+97);
        var s=String.fromCharCode(small);
        str+=s;
        //生成大小随机值
        var big=Math.random()*12+18;  //字体大小
        var mar=Math.random()*5+5;       //字体距离
        var colorful=randomcolor2();
        //字体旋转  左旋转  右旋转 有正有负，用cos解决正负问题
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return"<span style='font-size: "+big+"px;margin:0 "+mar+"px;transform: rotatez("+angle+"deg);color:"+colorful+"'>"+s+"</span>";
    }

    function bigenglish(){
        var small=Math.floor( Math.random()*26+97);
        var s=String.fromCharCode(small).toUpperCase();
        str+=s;
        var big=Math.random()*12+12;
        var mar=Math.random()*5+5;
        var colorful=randomcolor2();
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return"<span style='font-size: "+big+"px;margin:0 "+mar+"px;transform: rotatez("+angle+"deg);color:"+colorful+"'>"+s+"</span>";
    }

    function china(){
        var string = "中国语言文字网将由教育部语言文字应用研究所主办和运行管理,新网站访问入口更改";
        var s=string.charAt(Math.floor(Math.random()*string.length));  //charAt字符串中 根据索引找字符
        str+=s;
        var big=Math.random()*12+12;
        var mar=Math.random()*5;
        var colorful=randomcolor2();
        var angle = Math.cos(Math.random() * 180 * Math.PI / 180) > 0 ? (Math.random() * 20 + 25) : -(Math.random() * 20 + 25);
        return"<span style='font-size: "+big+"px;margin:0 "+mar+"px;transform: rotatez("+angle+"deg);color:"+colorful+"'>"+s+"</span>";
    }


    //字体颜色
    function randomcolor2(){
        var one=Math.floor(Math.random()*255);
        var two=Math.floor(Math.random()*255);
        var three=Math.floor(Math.random()*255);
        console.log(one);
        console.log(two);
        console.log(three);
        return "rgb("+one+","+two+","+three+")";
    }
    function randomColor(){
        var c=[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'];
        var s="";   //定义一个字符串
        for(var i=0;i< 6;i++){
            s+=c[Math.floor(Math.random()* c.length)]
        }
        console.log(s);
        return "#"+s;
    }

    window.onload=function(){
        a.innerHTML=show();
        b.onclick=function(){
            a.innerHTML=show();
        }
        btn.onclick=function(){  //input中的内容一定要用value获取
            if(c.value.toLowerCase()== str.toLowerCase()){
                alert("验证成功");
                c.value="";
            }
            else{
                alert("验证失败");
                a.innerHTML=show();
                c.value="";   //同时清空框内内容
            }
        }
    }
</script>