绘制一个登录界面,当点击登录按钮,获取用户名(admin)与密码(123)进行判断,成功弹出提示框显示:【登录成功!】,失败则弹出提示框显示:【登录失败!】。
时间: 2024-09-11 09:16:10 浏览: 25
在创建一个简单的登录界面,你可以使用HTML、CSS和JavaScript(或者一些前端框架如React或Vue)来构建。下面是一个基本的步骤描述:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Login</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-form">
<input type="text" id="username" placeholder="用户名" required />
<input type="password" id="password" placeholder="密码" required />
<button onclick="checkLogin()">登录</button>
<div id="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
```
2. **CSS样式** (styles.css):
```css
.login-form {
width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
}
```
3. **JavaScript验证函数** (script.js):
```javascript
function checkLogin() {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === 'admin' && password === '123') {
document.getElementById('message').innerHTML = "【登录成功!】";
alert("登录成功!");
} else {
document.getElementById('message').innerHTML = "【登录失败!】";
alert("登录失败!请输入正确的用户名和密码");
}
}
```
在这个例子中,用户输入的用户名和密码会直接在`checkLogin`函数中被检查。如果匹配,就显示“登录成功!”的提示;如果不匹配,显示“登录失败!”。