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

如何在用户成功登录后隐藏或消失登录消息。。"；用户名或密码不正确"；似乎工作良好，即它在setTimeout函数中的给定时间之后消失；用户已登录"；消息似乎停滞不前，即在给定的时间后不清楚，我该怎么办？。。提前感谢

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>

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)

}

将if语句中的return语句替换为break

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

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'
}
} 
}

是的，您可以使用break关键字而不是return/在return关键字之前使用setTimeout函数，或者您可以删除return关键字

相关内容

最新更新

热门标签：