用js写一个登录界面
时间: 2024-01-04 13:03:04 浏览: 22
好的,下面是一个简单的登录界面的HTML和JavaScript代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="button" value="Login" onclick="login()">
</form>
<script>
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 在这里编写登录验证逻辑
if (username === "admin" && password === "123456") {
alert("登录成功!");
} else {
alert("用户名或密码错误!");
}
}
</script>
</body>
</html>
```
在上面的代码中,我们使用了一个表单元素,包含了两个文本框和一个按钮。当用户点击按钮时,会调用JavaScript中的`login()`函数进行登录验证。在函数中,我们获取了文本框中用户输入的用户名和密码,并进行简单的验证判断。如果用户名和密码都匹配,就弹出一个提示框,提示用户登录成功;否则,就弹出一个提示框,提示用户用户名或密码错误。
当然,这只是一个非常简单的登录界面的实现,实际项目中需要考虑更多的安全性和用户体验问题。