簡單登錄Html，Css登錄如何添加定時器？

我創建了一個簡單的 html、css 登錄我想添加計時器

如果登錄 x3 失敗，一些文本將顯示無法登錄需要等待 15 秒才能再次登錄。

var login_attempts = 3;

function check_form() {
  var name = document.getElementById("name").value;
  var pass = document.getElementById("pass").value;
  if (name == "admin" && pass == "admin") {
    alert("SuccessFully Logged In");
    document.getElementById("name").value = "";
    document.getElementById("pass").value = "";
  } else {
    if (login_attempts == 0) {
      alert("No Login Attempts Available");
    } else {
      login_attempts = login_attempts - 1;
      alert("Login Failed Now Only "   login_attempts   " Login Attempts Available");
      if (login_attempts == 0) {
        document.getElementById("name").disabled = true;
        document.getElementById("pass").disabled = true;
        document.getElementById("form1").disabled = true;
      }
    }
  }

  return false;
}

body {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  font-family: helvetica;
}

#wrapper {
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  width: 995px;
}

#form1 {
  background-color: white;
  width: 380px;
  margin-left: 305px;
  box-shadow: 0px 0px 10px 0px #D8D8D8;
}

#form1 p {
  color: #FA8258;
  font-weight: bold;
}

#form1 #login_label {
  color: #FA8258;
  padding: 20px;
  font-size: 25px;
  border-bottom: 1px solid #E6E6E6;
  font-weight: bold;
}

#form1 input[type="text"],
input[type="password"] {
  width: 300px;
  height: 40px;
  padding-left: 10px;
  margin-top: 10px;
  border: 1px solid #D8D8D8;
}

#form1 input[type="submit"] {
  margin-top: 10px;
  width: 300px;
  height: 40px;
  background-color: #FA8258;
  border: none;
  color: white;
  box-shadow: 0px 3px 0px 0px #FE642E;
  border-radius: 3px;
  font-weight: bold;
}

<div id="wrapper">

  <form id="form1" method="post" action="" onsubmit="return check_form();">
    <p id="login_label">USER LOGIN</p>
    <input type="text" id="name" placeholder="Enter Username" required>
    <br>
    <input type="password" id="pass" placeholder="Enter Password" required>
    <br>
    <input type="submit" value="SUBMIT FORM">
    <p>Username : admin Password : admin</p>
    <br>
  </form>
</div>

uj5u.com熱心網友回復：

您可以使用setTimeout提取禁用并在 15 秒后呼叫它

我也添加了訊息并使用事件偵聽器

const toggle = disabled => {
  document.getElementById("message").hidden = !disabled; // toggle the message
  document.getElementById("name").disabled =
  document.getElementById("pass").disabled =
  document.getElementById("form1").disabled = disabled;
  login_attempts = disabled ? 0 : 3; // give more attempts
};
 ...

if (login_attempts == 0) {
  toggle(1); // disable
  setTimeout(toggle, 15000); // called without parameter will enable
}

顯示代碼片段

var login_attempts = 3;

const toggle = disabled => {
  document.getElementById("message").hidden = !disabled; // toggle the message
  document.getElementById("name").disabled =
  document.getElementById("pass").disabled =
  document.getElementById("form1").disabled = disabled;
  login_attempts = disabled ? 0 : 3; // give more attempts
};

document.getElementById("form1").addEventListener("submit", function(e) {
  e.preventDefault();

  var name = document.getElementById("name").value;
  var pass = document.getElementById("pass").value;
  if (name == "admin" && pass == "admin") {
    alert("SuccessFully Logged In");
    document.getElementById("name").value = "";
    document.getElementById("pass").value = "";
  } else {
    if (login_attempts == 0) {
      alert("No Login Attempts Available");
    } else {
      login_attempts = login_attempts - 1;
      alert("Login Failed Now Only "   login_attempts   " Login Attempts Available");
      if (login_attempts == 0) {
        toggle(1); // disable
        setTimeout(toggle, 15000); // called without parameter will enable
      }
    }
  }
})

body {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 0px;
  font-family: helvetica;
}

#wrapper {
  text-align: center;
  margin: 0 auto;
  padding: 0px;
  width: 995px;
}

#form1 {
  background-color: white;
  width: 380px;
  margin-left: 305px;
  box-shadow: 0px 0px 10px 0px #D8D8D8;
}

#form1 p {
  color: #FA8258;
  font-weight: bold;
}

#form1 #login_label {
  color: #FA8258;
  padding: 20px;
  font-size: 25px;
  border-bottom: 1px solid #E6E6E6;
  font-weight: bold;
}

#form1 input[type="text"],
input[type="password"] {
  width: 300px;
  height: 40px;
  padding-left: 10px;
  margin-top: 10px;
  border: 1px solid #D8D8D8;
}

#form1 input[type="submit"] {
  margin-top: 10px;
  width: 300px;
  height: 40px;
  background-color: #FA8258;
  border: none;
  color: white;
  box-shadow: 0px 3px 0px 0px #FE642E;
  border-radius: 3px;
  font-weight: bold;
}

<div id="wrapper">

  <form id="form1" method="post" action="">
    <p id="login_label">USER LOGIN</p>
    <input type="text" id="name" placeholder="Enter Username" required>
    <br>
    <input type="password" id="pass" placeholder="Enter Password" required>
    <br>
    <input type="submit" value="SUBMIT FORM">
    <p id="message" hidden>Please wait 15 seconds before trying again</p>
    <p>Username : admin Password : admin</p>
    <br>
  </form>
</div>

標籤：

上一篇：關閉按鈕在許多Android設備上不起作用

下一篇：在當前月份打開jQueryUIDatePicker，無論選擇哪個日期