使用html 设计一个登录页面,登录页面显示时间,登录信息通过websocket提交,同时显示虚拟动漫人物
时间: 2024-01-06 13:06:12 浏览: 19
好的,下面是一个简单的登录页面的 HTML 代码,其中包含了一个显示时间的 JavaScript 函数和一个 WebSocket 连接:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<script type="text/javascript">
// 显示当前时间
function showTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
document.getElementById('time').innerHTML = hours + ":" + minutes + ":" + seconds;
setTimeout(showTime, 1000);
}
function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
window.onload = showTime;
// WebSocket 连接
var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
console.log('WebSocket connected.');
};
ws.onmessage = function(event) {
var message = event.data;
document.getElementById('chat').innerHTML += '<br>' + message;
};
function sendMessage() {
var message = document.getElementById('message').value;
ws.send(message);
document.getElementById('message').value = '';
document.getElementById('chat').innerHTML += '<br><b>You:</b> ' + message;
}
</script>
</head>
<body>
<h1>Login Page</h1>
<p>Current time: <span id="time"></span></p>
<form>
<label>Username:</label>
<input type="text" name="username">
<label>Password:</label>
<input type="password" name="password">
<input type="submit" value="Login">
</form>
<div id="chat"></div>
<input type="text" id="message">
<button onclick="sendMessage()">Send</button>
<img src="virtual_character.png" alt="Virtual Character">
</body>
</html>
```
在这个页面中,我们使用了 JavaScript 来实现显示当前时间的功能,同时使用了 WebSocket 来实现登录信息的提交和显示虚拟动漫人物。在 WebSocket 的连接中,我们通过 `ws.send()` 方法来发送用户输入的消息,通过 `ws.onmessage` 方法来接收其他用户发送的消息,并通过 `document.getElementById('chat').innerHTML` 方法将消息显示在页面中。最后,我们使用 `<img>` 标签来显示虚拟动漫人物的图片。