Heim > Artikel > Web-Frontend > Das JavaScript-Passwort wurde falsch eingegeben und erneut eingegeben
JavaScript Falsches Passwort erneut eingeben
Mit der kontinuierlichen Entwicklung und Beliebtheit des Internets beginnen immer mehr Menschen, verschiedene Anwendungen für die Online-Interaktion zu nutzen, und diese Anwendungen erfordern Konten und Passwörter zur Anmeldeauthentifizierung. Um die Sicherheit des Kontos zu gewährleisten, richten viele Anwendungen einen Mechanismus ein, der Sie dazu zwingt, eine gewisse Zeit zu warten, bevor Sie das Passwort erneut eingeben, wenn das Passwort falsch eingegeben wurde. Die Implementierung dieses Mechanismus erfordert die Verwendung von JavaScript zur Programmierung.
In diesem Artikel werden wir anhand eines Beispielprogramms den Schreibprozess und die Implementierungsdetails von JavaScript zur Implementierung der Passwortwiederholung ausführlich erläutern.
Anforderungsanalyse des Beispielprogramms:
Die Anforderungen dieses Beispielprogramms lauten wie folgt:
Basierend auf den oben genannten Anforderungen können wir JavaScript-Code wie folgt schreiben:
// 定义密码输入错误次数的变量 var count = 0; // 定义是否需要等待的布尔变量 var wait = false; // 定义等待时间的变量 var time = 0; // 监听登录按钮的点击事件 document.getElementById("login").onclick = function() { // 获取用户输入的密码和用户名 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 判断是否需要等待 if (wait) { // 提示用户需要等待 alert("请" + time + "秒后重试!"); return; } // 判断用户名和密码是否正确 if (username === "admin" && password === "123456") { // 登录成功,跳转到主页面 location.href = "main.html"; } else { // 登录失败,提示用户重新输入密码 alert("用户名或密码错误!"); count++; // 判断是否需要等待 if (count >= 3) { // 需要等待 180 秒 count = 0; wait = true; time = 180; setInterval(function() { time--; if (time == 0) { wait = false; } }, 1000); } else { // 需要等待 5 秒 wait = true; time = 5; setInterval(function() { time--; if (time == 0) { wait = false; } }, 1000); } } }
Codeanalyse:
Im obigen Code definieren wir zunächst drei Variablen: Anzahl, Wartezeit und Zeit, die zum Aufzeichnen des falschen Passworts des Benutzers verwendet werden bzw. die Anzahl der Male, ob es notwendig ist zu warten und die Wartezeit.
Dann haben wir uns das Klickereignis der Anmeldeschaltfläche angehört. In der Handlerfunktion des Klickereignisses erhalten wir zunächst den vom Benutzer eingegebenen Benutzernamen und das Kennwort und bestimmen dann, ob wir warten müssen. Wenn Sie warten müssen, fordern Sie den Benutzer direkt zum Warten auf und kehren Sie dann zurück.
Wenn Sie nicht warten müssen, prüfen wir, ob der eingegebene Benutzername und das Passwort korrekt sind. Wenn es richtig ist, wird zur Hauptseite gesprungen. Wenn es falsch ist, wird der Benutzer aufgefordert, das Passwort erneut einzugeben, und die Anzahl der falschen Passworteingaben wird um 1 erhöht.
Wenn das falsche Passwort mehr als dreimal eingegeben wird, müssen wir 180 Sekunden warten, bevor wir das Passwort erneut eingeben. Während des Wartevorgangs setzen wir „wait“ auf „true“, „time“ auf 180 und verwenden den setInterval-Timer, um die Zeit alle 1 Sekunde um 1 Sekunde zu verringern, bis die Wartezeit 0 ist. Nachdem die Wartezeit 0 erreicht hat, können wir „wait“ auf „false“ setzen.
Wenn das falsche Passwort nicht öfter als dreimal eingegeben wird, müssen wir 5 Sekunden warten, bevor wir das Passwort erneut eingeben, und eine ähnliche Methode verwenden, um die Wartezeit-Timing- und Kontrollfunktionen zu implementieren.
Zusammenfassung:
Durch die Einführung des obigen Codes können wir sehen, dass die Funktion von JavaScript, ein falsches Passwort erneut zu versuchen, nicht kompliziert ist und nur ein gewisses grundlegendes logisches Urteilsvermögen und eine Timer-Steuerung erfordert. Natürlich müssen bei der Implementierung einige Faktoren wie Eingabesicherheit, Schnittstellenlayout und andere berücksichtigt werden. Diese Faktoren müssen beim eigentlichen Schreiben entsprechend den tatsächlichen Anforderungen angepasst und optimiert werden.
Das obige ist der detaillierte Inhalt vonDas JavaScript-Passwort wurde falsch eingegeben und erneut eingegeben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!