使用prompt函数,console以及alert函数,写一个登录界面。 弹出输入框,输入用户名 弹出输入框,输入密码 验证用户名,密码是否正确,当用户名密码正确显示在页面中用户名 当用户名密码不正确弹出提示框
时间: 2024-09-06 22:06:44 浏览: 26
这是一个简单的HTML、JavaScript登录界面的例子,利用`prompt`函数获取用户输入,并用`console.log`和`alert`进行验证和反馈:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" oninput="checkLogin(this.value, passwordInput.value)">
<label for="password">Password:</label>
<input type="password" id="password" oninput="checkLogin(passwordInput.value, this.value)" style="display:none;" id="passwordInput">
<div id="loginStatus"></div>
<script>
function checkLogin(username, password) {
// 假设这里有一个预先定义的用户名和密码数组
const users = { "admin": "123456", "user1": "pass1" }; // 仅作示例
const enteredUsername = username.trim();
const enteredPassword = password.trim();
if (enteredUsername in users && enteredPassword === users[enteredUsername]) {
console.log(`Logged in as ${enteredUsername}`);
document.getElementById("loginStatus").innerText = `Welcome, ${enteredUsername}`;
} else {
alert("Invalid login credentials! Please try again.");
document.getElementById("loginStatus").innerText = "";
}
}
</script>
</body>
</html>
```
在这个例子中,我们有两个输入框,一个用于用户名和一个隐藏的用于密码。当你在任何一个输入框中键入,`checkLogin`函数会被触发。如果用户名和密码匹配,会在控制台打印一条消息并在页面上显示欢迎信息;如果不匹配,则会弹出提示框告知无效登录。