html 设计一个登录界面,显示实时时间 登录信息通过websocket 提交 登录成功后 跳转到主页面
时间: 2024-01-28 16:04:18 浏览: 32
好的,以下是一个简单的 HTML 登录界面的设计,同时显示实时时间:
```
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<script>
function displayTime() {
var date = new Date();
var time = date.toLocaleTimeString();
document.getElementById("time").innerHTML = time;
setTimeout(displayTime, 1000);
}
</script>
</head>
<body onload="displayTime()">
<h1>登录</h1>
<p id="time"></p>
<form action="#" method="POST" onsubmit="return false;">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<button type="submit" onclick="submitLogin()">登录</button>
</form>
<script>
function submitLogin() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 使用 WebSocket 提交登录信息
var socket = new WebSocket("ws://localhost:8080/login");
socket.onopen = function() {
socket.send(JSON.stringify({
"username": username,
"password": password
}));
};
socket.onmessage = function(event) {
var data = JSON.parse(event.data);
if (data.success) {
window.location.href = "main.html";
} else {
alert("用户名或密码错误,请重新输入!");
}
};
}
</script>
</body>
</html>
```
这个登录界面会实时显示当前的时间,同时使用 WebSocket 提交登录信息。当用户点击登录按钮时,会将用户名和密码通过 WebSocket 发送给服务器,服务器验证后返回登录结果。如果登录成功,则跳转到主页面;否则弹出提示框。请注意,这里使用了一个假的 WebSocket 地址,需要根据实际情况进行修改。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://img-home.csdnimg.cn/images/20210720083646.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)