用js写一个使用不同身份登录的页面
时间: 2024-06-11 07:04:18 浏览: 18
抱歉,作为AI语言模型,我无法提供完整的用户界面代码。以下是一个简单的示例代码,它模拟了使用不同身份登录的页面:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录页面</title>
</head>
<body>
<h1>登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password"><br><br>
<label for="role">角色:</label>
<select id="role">
<option value="admin">管理员</option>
<option value="user">普通用户</option>
</select><br><br>
<button type="button" onclick="login()">登录</button>
</form>
<script src="login.js"></script>
</body>
</html>
```
JavaScript:
```javascript
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var role = document.getElementById("role").value;
if (role === "admin") {
if (username === "admin" && password === "admin123") {
alert("管理员登录成功!");
} else {
alert("用户名或密码错误!");
}
} else if (role === "user") {
if (username === "user" && password === "user123") {
alert("普通用户登录成功!");
} else {
alert("用户名或密码错误!");
}
}
}
```
这段JavaScript代码将获取输入的用户名、密码和角色,然后根据角色执行不同的登录逻辑。如果角色是管理员,则检查用户名和密码是否正确。如果正确,则弹出“管理员登录成功!”的提示框。如果不正确,则弹出“用户名或密码错误!”的提示框。如果角色是普通用户,则执行类似的逻辑。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)