Javascript 使用setTimeout函数清除表单上的登录消息_Javascript_Html_Arrays_Forms_Web

Javascript 使用setTimeout函数清除表单上的登录消息

javascript html arrays forms web

Javascript 使用setTimeout函数清除表单上的登录消息,javascript,html,arrays,forms,web,Javascript,Html,Arrays,Forms,Web,如何在用户成功登录后使登录消息隐藏或消失。。 “用户名或密码不正确”似乎工作正常，即在设置超时功能的给定时间后消失，但“用户已登录”消息似乎停滞不前，即在给定时间后不清楚，我能做些什么？。提前感谢 HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport&

如何在用户成功登录后使登录消息隐藏或消失。。 “用户名或密码不正确”似乎工作正常，即在设置超时功能的给定时间后消失，但“用户已登录”消息似乎停滞不前，即在给定时间后不清楚，我能做些什么？。提前感谢

HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <title>Login System</title>
</head>
<body>

  <div class="card">
    <div class="container">
      <h3>Fransix web</h3>
  <form>
    <h4>Log-in to your account</h4>
    <div class="field">
    <i class="fas fa-user"></i>
    <input type="text" id="username" placeholder="Username">
  </div>
  <div class="field">
    <i class="fas fa-lock"></i>
    <input type="text" id="password" placeholder="Password">
  </div>
    <a class="btn" href="#" onclick="getInfo()">Submit</a>
  </form>
</div>
<h5 class="message"></h5>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>

HTML代码：
登录系统
弗朗西克斯网
登录到您的帐户

Javascript代码

var Users = [
  {
    username: "fransix",
    password: "web"
  },
  
  {
    username: "dave",
    password: "spider"
  },
  
  {
    username: "mike",
    password: "battery"
  }
]


function getInfo() {
  var username = document.getElementById("username").value
  var password = document.getElementById("password").value
  var message = document.querySelector
  (".message")
  
  for(i = 0; i < Users.length; i++) {
    if(username === Users[i].username && password === Users[i].password) {
      message.innerHTML = `${username} is logged in!!`
      message.style.color = 'green';
      return;
    }
    else {
      message.innerHTML = `Username or password is incorrect`
      message.style.color = 'red'
    }
  } 
  setTimeout(function() {
    $(".message").hide()
  },3000)
  
}

var用户=[
{
用户名：“fransix”，
密码：“web”
},
{
用户名：“dave”，
密码：“蜘蛛”
},
{
用户名：“迈克”，
密码：“电池”
}
]
函数getInfo（）{
var username=document.getElementById（“用户名”）.value
var password=document.getElementById（“密码”）.value
var message=document.querySelector
（“.message”）
对于（i=0；i

将if语句中的

return

语句替换为

break

当用户名和密码正确时，您将从函数返回，因此代码不会到达

setTimeout

函数调用

函数getInfo（）{
function getInfo() {                                                 
   var username = document.getElementById("username").value       
   var password = document.getElementById("password").value
   var message = document.querySelector
   (".message")
   for(i = 0; i < Users.length; i++) {
     if(username === Users[i].username && password === Users[i].password) {
       message.innerHTML = `${username} is logged in!!`
       message.style.color = 'green';
       setTimeout(function() {
          $('.message').hide();
        },3000)
       return;
     }
     else {
      message.innerHTML = `Username or password is incorrect`
      message.style.color = 'red'
     }
   } 
 }

var username=document.getElementById（“用户名”）.value
var password=document.getElementById（“密码”）.value
var message=document.querySelector
（“.message”）
对于（i=0；i


是的，您可以使用break关键字代替return/在return关键字之前使用setTimeout函数，或者您可以删除return关键字
删除return；成功登录的if条件中的语句。