用js做一个简单的登录界面
时间: 2023-05-29 10:07:01 浏览: 92
以下是一个简单的登录界面示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<script src="login.js"></script>
</head>
<body>
<div>
<label for="username">Username:</label>
<input type="text" id="username">
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password">
</div>
<button onclick="login()">Login</button>
<p id="message"></p>
</body>
</html>
```
JavaScript代码:
```
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "admin" && password === "123456") {
document.getElementById("message").innerHTML = "Login successful!";
} else {
document.getElementById("message").innerHTML = "Invalid username or password.";
}
}
```
此代码将创建一个简单的登录界面,其中包含一个用户名输入框、一个密码输入框和一个登录按钮。当用户单击登录按钮时,将调用login函数。该函数将获取用户名和密码输入框中的值,并将其与预定义的用户名和密码进行比较。如果用户名和密码正确,则显示“登录成功!”消息,否则显示“无效用户名或密码。”消息。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)