html页面账号<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form> <h1>管理员登录界面</h1> <ul><input type="text" id="uName" class="uName" placeholder="请输入管理员用户名"></ul> <ul><input type="password" id="pass" class="pass" placeholder="请输入管理员密码"></ul> <ul><input type="button" id="sm" class="sm" value="登录"></ul> </form> </body> </html> 利用JS声明指定账号和密码存入一个数组,并需要在页面输入指定的账号和密码才能实现点击登陆跳转页面
时间: 2023-07-19 09:36:51 浏览: 58
好的,可以按照以下步骤实现:
1. 在 JS 中声明一个对象数组,存储指定的账号和密码:
```
var users = [
{username: "admin", password: "123456"},
{username: "test", password: "654321"}
];
```
2. 给页面中的登录按钮添加点击事件,调用验证函数:
```
var loginBtn = document.getElementById("sm");
loginBtn.addEventListener("click", function() {
validateUser();
});
```
3. 在验证函数中获取用户输入的账号和密码,循环判断是否匹配:
```
function validateUser() {
var usernameInput = document.getElementById("uName").value;
var passwordInput = document.getElementById("pass").value;
for (var i = 0; i < users.length; i++) {
if (usernameInput === users[i].username && passwordInput === users[i].password) {
window.location.href = "success.html"; // 跳转到登录成功页面
return;
}
}
alert("账号或密码有误,请重新输入!");
}
```
完整的 HTML 和 JS 代码如下:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>管理员登录界面</title>
</head>
<body>
<form>
<h1>管理员登录界面</h1>
<ul><input type="text" id="uName" class="uName" placeholder="请输入管理员用户名"></ul>
<ul><input type="password" id="pass" class="pass" placeholder="请输入管理员密码"></ul>
<ul><input type="button" id="sm" class="sm" value="登录"></ul>
</form>
<script>
var users = [
{username: "admin", password: "123456"},
{username: "test", password: "654321"}
];
var loginBtn = document.getElementById("sm");
loginBtn.addEventListener("click", function() {
validateUser();
});
function validateUser() {
var usernameInput = document.getElementById("uName").value;
var passwordInput = document.getElementById("pass").value;
for (var i = 0; i < users.length; i++) {
if (usernameInput === users[i].username && passwordInput === users[i].password) {
window.location.href = "success.html";
return;
}
}
alert("账号或密码有误,请重新输入!");
}
</script>
</body>
</html>
```
注意要新建一个名为 success.html 的页面,作为登录成功后跳转的页面,否则会报错。