如何以简单的形式限制密码尝试的次数？

提问者：小点点

如何以简单的形式限制密码尝试的次数？

我试图使一个基本的密码检查与3次尝试使用一个文本框和按钮。所以在HTML中，我有这两个元素和一个段落，我想在其中发布答案（正确，错误，out of entries）。

这是HTML代码:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Test page for Java.">
    <link rel="stylesheet" href="style.css">
    <title>Java Tester</title>
  </head>
  <body>

    <input id="textbox" type="text">
    <button id="button">Enter</button>
    <p id="answer"></p>

    <script src="script.js"></script>

  </body>
</html>

我在JavaScript中使用while循环进行尝试。我知道下面的代码不起作用，因为第一次输入错误的答案会循环三次并直接进入“Out of Entries”。我在想怎么写这个，所以我有三次尝试。

JavaScript代码:

var answer = document.getElementById("answer");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");

var password = "wordpass";
var response;
var entryCount = 0;
var entryLimit = 3;
var error = false;

button.addEventListener("click", function(){

  while(textbox.value != password && !error){
    if(entryCount < entryLimit){
      answer.innerHTML = "Wrong Password";
      entryCount++;
      textbox.value = "";
    } else{
      error = true;
    }
  }

  if(error){
    answer.innerHTML = "Out of entries";
  } else{
    answer.innerHTML = "Correct Password";
  }

但是，我想如果我只是在textbox.value=“”；下面的while循环中编写一些随机文本，它就会以我想要的方式开始工作--我可以输入三次pass。这是为什么？这里只需要说明一下JS代码的工作原理。

工作JS代码:

var answer = document.getElementById("answer");
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");

var password = "wordpass";
var response;
var entryCount = 0;
var entryLimit = 3;
var error = false;

button.addEventListener("click", function(){

  while(textbox.value != password && !error){
    if(entryCount < entryLimit){
      answer.innerHTML = "Wrong Password";
      entryCount++;
      textbox.value = "";
      ousdgohjrandomfoihsodfhsdfhsdofihoihsoidhsdoufhouhsdfrduiiugsdf
    } else{
      error = true;
    }
  }

  if(error){
    answer.innerHTML = "Out of entries";
  } else{
    answer.innerHTML = "Correct Password";
  }

});

共2个答案

匿名用户

响应click事件的代码不会“暂停”并再次等待UI输入，因此while循环并不是真正必需的。您可以用if-check替换它，然后在成功时重置重试计数。您还可以删除error变量，并在其位置移动应答响应。

我还对逻辑做了一点修改，将重试计数作为第一次检查；否则，用户将能够继续猜测，即使他们超过了重试计数。

var answer = document.getElementById("answer");  
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");

var password = "wordpass";
var entryCount = 0;
var entryLimit = 3;

button.addEventListener("click", function(){
  if (entryCount < entryLimit) {
    if (textbox.value != password){
      answer.innerHTML = "Wrong Password";
      entryCount++;
      textbox.value = "";
    } else {
      // success!
      entryCount = 0;
      answer.innerHTML = "Correct Password";
    }
  } else {
      answer.innerHTML = "Out of entries";
  }
}

下面是一个工作示例:

null

var answer = document.getElementById("answer");  
var textbox = document.getElementById("textbox");
var button = document.getElementById("button");

var password = "wordpass";
var entryCount = 0;
var entryLimit = 3;

button.addEventListener("click", function(){
  if (entryCount < entryLimit) {
    if (textbox.value != password){
      answer.innerHTML = "Wrong Password";
      entryCount++;
      textbox.value = "";
    } else {
      // success!
      entryCount = 0;
      answer.innerHTML = "Correct Password";
    }
  } else {
      answer.innerHTML = "Out of entries";
  }
});

<input type="text" id="textbox" placeholder="Password" />
<button id="button" type="button">Login</button>

<div id="answer"></div>

匿名用户

第一次不工作是因为while循环是不必要的。它在同一个答案上循环，直到超过errorcount。当您添加随机文本时，它会抛出一个运行时错误，并在第一次运行时中断循环。用简单的if替换while应该可以。