Heim > Artikel > Web-Frontend > Native js-Implementierung der Methode zur Generierung von Verifizierungscodes (vollständiger Code)

Native js-Implementierung der Methode zur Generierung von Verifizierungscodes (vollständiger Code)

不言Original: 2018-08-23 14:10:453625Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Generierungsmethode für den Verifizierungscode für die native JS-Implementierung (vollständiger Code). Ich hoffe, dass er für Sie hilfreich ist.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block{
            width: 150px;
            height: 50px;
            line-height: 50px;
            border: 1px solid silver;
            background:url("./img/bg1.png")no-repeat;
            background-size:120% ;
            text-align: center;
        }
        .btn{
            color: green;
            background-color: #d6ffe1;
            cursor: pointer;
        }
        .yztxt{
            width: 150px;
            height: 20px;
            border: 1px solid silver;
        }
    </style>
</head>
<body>
<p class="block"></p>
<span class="btn">看不清....</span><br>
<input class="yztxt" type="text"><br>
<button class="yz">验证</button>
<script>
    var b=document.getElementsByClassName("block")[0];
    var btn=document.getElementsByClassName("btn")[0];
    var s=document.getElementsByClassName("txt");
    var yztxt=document.getElementsByClassName("yztxt")[0];
    var yz=document.getElementsByClassName("yz")[0];
    var numrous=""; //定义一个空数组 用来存放生成的验证码
    yz.onclick=function(){  //给验证按钮一个方法 判断验证码是否输入正确
        if(yztxt.value.length<=0){
            alert("请输入验证码：")
        }
         else if(yztxt.value== numrous.toLowerCase()){
            alert("验证成功！");
        }
        else{
            alert("验证失败！");
            nrandom();//验证失败重新调随机产生验证码的函数
        }
    };

    btn.onclick=function(){//当鼠标点击看不清时，切换验证码
        nrandom();
    };
    nrandom();
    function nrandom(){
        numrous="";//在产生下一组验证码，清空上次验证码
        b.innerHTML="";//清空文本框中验证码
        for(var i=0;i<6;i++){
             var num=Math.random()*100; //产生数字，大小写字母的总概率100
            if(num<=50){
                //数字产生的概率50%
                var n=Math.floor(Math.random()*10);
                numrous+=n;//将随机产生的数字放在字符串numrous
                b.innerHTML+="<span class=&#39;txt&#39;>"+n+"</span>";//将随机产生的数字在文本框中显示
            }
            else if(num>=50&&num<=80){
                //产生小写字母的概率为30%
                var n =String.fromCharCode(Math.floor(Math.random()*25+97));
                numrous+=n;
                b.innerHTML+="<span class=&#39;txt&#39;>"+n+"</span>";
            }
            else{
                //产生大写字母的概率20%
                var n =String.fromCharCode(Math.floor(Math.random()*25+65));
                numrous+=n;
                b.innerHTML+="<span class=&#39;txt&#39;>"+n+"</span>";
            }
        }
        stylezi();//调用验证码字体样式
    }
    //下面分别设置了验证码的颜色，大小，粗细，距左的距离以及倾斜角度
   function stylezi(){
        for(var i=0;i< s.length;i++){
            s[i].style.color="rgb("+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+","+Math.floor(Math.random()*255)+")";
            s[i].style.fontSize=(Math.random()*20+15)+"px";
            s[i].style.fontWeight=Math.random()*300+200;
            s[i].style.left=(Math.random()*20-10)+"px";
            s[i].style.transform="rotatez("+Math.random()*90-45+"deg)";
        }
    }
</script>
</body>
</html>

Verwandte Empfehlungen:

JS-Code-Implementierung zur Zeitanzeige auf einer Webseite

Wie generiert js einen QR-Code? So generieren Sie QR-Code mit js (Code)

Das obige ist der detaillierte Inhalt vonNative js-Implementierung der Methode zur Generierung von Verifizierungscodes (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der Methoden zum asynchronen Laden von JS-Dateien (mit Code)Nächster Artikel：Zusammenfassung der Methoden zum asynchronen Laden von JS-Dateien (mit Code)

In Verbindung stehende Artikel

Mehr sehen