suchen

Heim >Web-Frontend >js-Tutorial >So erzielen Sie mit JavaScript den Effekt, einen Bestätigungscode zu erhalten

So erzielen Sie mit JavaScript den Effekt, einen Bestätigungscode zu erhalten

yulia
yuliaOriginal
2018-10-17 10:33:139540Durchsuche

Ist Ihnen beim Surfen auf der Website aufgefallen, dass fast jede Website beim Anmelden eine Bestätigungscode-Verifizierung erfordert? Wissen Sie, wie Sie mit JS den Effekt erzielen, den Bestätigungscode zu erhalten? In diesem Artikel erfahren Sie, wie Sie mit JS Bestätigungscodes schreiben und den Code zum Erhalten von Bestätigungscodes mit JS teilen. Er hat einen bestimmten Referenzwert und interessierte Freunde können darauf verweisen.

Wenn Sie JS verwenden möchten, um den Bestätigungscode zu erhalten, müssen Sie viele Kenntnisse in JavaScript verwenden, z. B.: random(), if-Funktion, for-Schleife usw. Wenn Sie sich nicht sicher sind, Sie können sich auf die verwandten Artikel der chinesischen PHP-Website beziehen oder das JavaScript-Video-Tutorial besuchen.

Ein einfacher Code, den ich in JS geschrieben habe, um den Bestätigungscode zu erhalten (einfach den CSS-Stil festlegen, sich auf den JavaScript-Teil konzentrieren), der spezifische Code lautet wie folgt:

HTML-Teil: 

<body onload=&#39;createCode()&#39;> 
        <div>验证码：  
            <input type = "text" id = "input"/>  
            <input type="button" id="code" onclick="createCode()" style="width:60px" title=&#39;点击更换验证码&#39; /></br>
            <input type = "button" value = "验证" onclick = "validate()"/>
        </div>  
</body>

CSS-Teil: 

 #code{
             font-family:Arial,宋体;
             font-style:italic;
             color:green;
             border:0;
             padding:5px 10px;
             letter-spacing:3px;
             font-weight:bolder;
         }

JavaScript-Teil: 

var code ; //在全局定义验证码         
        function createCode(){
             code = "";   
             var codeLength = 4;//验证码的长度  
             var checkCode = document.getElementById("code");   
             var random = new Array(0,1,2,3,4,5,6,7,8,9,&#39;A&#39;,&#39;B&#39;,&#39;C&#39;,&#39;D&#39;,&#39;E&#39;,&#39;F&#39;,&#39;G&#39;,
             &#39;H&#39;,&#39;I&#39;,&#39;J&#39;,&#39;K&#39;,&#39;L&#39;,&#39;M&#39;,&#39;N&#39;,&#39;O&#39;,&#39;P&#39;,&#39;Q&#39;,&#39;R&#39;,&#39;S&#39;,&#39;T&#39;,&#39;U&#39;,&#39;V&#39;,&#39;W&#39;,&#39;X&#39;,&#39;Y&#39;,
             &#39;Z&#39;);//随机数  
             for(var i = 0; i < codeLength; i++) {//循环操作  
                var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
                code += random[index];//根据索引取得随机数加到code上  
            }  
            checkCode.value = code;//把code值赋给验证码  
        }
        //校验验证码  
        function validate(){  
            var inputCode = document.getElementById("input").value.toUpperCase(); 
            //取得输入的验证码并转化为大写        
            if(inputCode.length <= 0) { //若输入的验证码长度为0  
                alert("请输入验证码！"); //则弹出请输入验证码  
            }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
                alert("验证码输入错误!"); //则弹出验证码输入错误  
                createCode();//刷新验证码  
                document.getElementById("input").value = "";//清空文本框  
            }else { //输入正确时  
                alert("验证通过");
            }
        }

Die spezifischen Schritte der JavaScript-Implementierung zum Erhalten des Bestätigungscodes wurden im Code ausführlich erläutert Kommentare und werden hier nicht wiederholt. Der Effekt des Bestätigungscodes ist in der folgenden Abbildung dargestellt:

So erzielen Sie mit JavaScript den Effekt, einen Bestätigungscode zu erhalten

Oben werden die spezifischen Schritte der JS-Implementierung zum Erhalten des Bestätigungscodes beschrieben Es wird im Projekt häufiger verwendet, und ich hoffe, Sie können es selbst ausprobieren und sehen, ob Sie einen solchen Effekt schreiben können.

【Empfohlene verwandte Tutorials】

1. JavaScript-Referenzhandbuch für Chinesisch
2. JavaScript-Grafik-Tutorial
3 >Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit JavaScript den Effekt, einen Bestätigungscode zu erhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php JavaScript css bootstrap html if for 循环 JS
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：Wie durchläuft man ein Array in jquery? Zwei gängige Methoden zum Durchlaufen von Arrays in JQueryNächster Artikel：Wie durchläuft man ein Array in jquery? Zwei gängige Methoden zum Durchlaufen von Arrays in JQuery

In Verbindung stehende Artikel

Mehr sehen