在线聊天页面：HTML 前端实现实时聊天功能
<!DOCTYPE html>
<html>
<head>
<title>在线聊天页面</title>
<meta charset="UTF-8">
<style>
body {
background-color: #fff;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
}
#chat-history {
height: 80%;
background-color: #fff;
overflow-y: scroll;
padding: 10px;
}
#input-box {
height: 20%;
background-color: #ccc;
padding: 10px;
}
#input-message {
width: 100%;
height: 100%;
box-sizing: border-box;
border: none;
outline: none;
background-color: #eee;
border-radius: 5px;
padding: 10px;
font-size: 14px;
}
.message-box {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.send-message-box {
background-color: #ccc;
}
.receive-message-box {
background-color: #cfc;
}
.markdown {
font-size: 14px;
line-height: 1.5em;
}
#color-picker {
position: fixed;
top: 20px;
right: 20px;
}
.color {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5px;
border-radius: 50%;
cursor: pointer;
}
.white {
background-color: #fff;
}
.black {
background-color: #000;
}
.green {
background-color: #0f0;
}
.red {
background-color: #f00;
}
.pink {
background-color: #f0f;
}
.purple {
background-color: #800080;
}
.blue {
background-color: #00f;
}
.darkgreen {
background-color: #006400;
}
.orange {
background-color: #ffa500;
}
</style>
</head>
<body>
<div id="chat-history"></div>
<div id="input-box">
<textarea id="input-message" placeholder="请输入聊天内容，按Enter发送"></textarea>
</div>
<div id="color-picker">
<div class="color white"></div>
<div class="color black"></div>
<div class="color green"></div>
<div class="color red"></div>
<div class="color pink"></div>
<div class="color purple"></div>
<div class="color blue"></div>
<div class="color darkgreen"></div>
<div class="color orange"></div>
</div>
<script>
// 获取元素
const chatHistory = document.querySelector('#chat-history');
const inputMessage = document.querySelector('#input-message');
const colorPicker = document.querySelector('#color-picker');
const colors = colorPicker.querySelectorAll('.color');
<pre><code> // 定义变量
let currentColor = '#fff';
// 监听事件
inputMessage.addEventListener('keydown', function(event) {
if (event.keyCode === 13 && !event.shiftKey) {
event.preventDefault();
const messageText = inputMessage.value.trim();
if (messageText) {
const messageBox = createMessageBox(messageText, true);
chatHistory.appendChild(messageBox);
scrollToBottom();
sendMessage(messageText);
inputMessage.value = '';
}
}
});
colors.forEach(function(color) {
color.addEventListener('click', function() {
const colorClass = this.classList[1];
currentColor = getColorFromClassName(colorClass);
updateColor();
});
});
// 函数定义
function createMessageBox(messageText, isSend) {
let messageBox = document.createElement('div');
messageBox.classList.add('message-box');
if (isSend) {
messageBox.classList.add('send-message-box');
} else {
messageBox.classList.add('receive-message-box');
}
let messageContent = document.createElement('div');
messageContent.innerHTML = marked(messageText);
messageContent.classList.add('markdown');
messageBox.appendChild(messageContent);
return messageBox;
}
function scrollToBottom() {
chatHistory.scrollTop = chatHistory.scrollHeight;
}
function sendMessage(messageText) {
const xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:8089/chat');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
const responseText = xhr.responseText;
const messageBox = createMessageBox(responseText, false);
chatHistory.appendChild(messageBox);
scrollToBottom();
}
};
const requestObject = {
message: messageText,
color: currentColor
};
xhr.send(JSON.stringify(requestObject));
}
function getColorFromClassName(className) {
switch (className) {
case 'white':
return '#fff';
case 'black':
return '#000';
case 'green':
return '#0f0';
case 'red':
return '#f00';
case 'pink':
return '#f0f';
case 'purple':
return '#800080';
case 'blue':
return '#00f';
case 'darkgreen':
return '#006400';
case 'orange':
return '#ffa500';
default:
return '#fff';
}
}
function updateColor() {
chatHistory.style.backgroundColor = currentColor;
inputMessage.style.backgroundColor = currentColor;
}
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lvW9 著作权归作者所有。请勿转载和采集!