在线聊天页面：HTML 前端实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在线聊天页面</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: white;
}
.container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-color: white;
}
.chat-history {
height: 80%;
overflow-y: auto;
padding: 20px;
background-color: white;
}
.input-box {
height: 20%;
display: flex;
align-items: center;
padding: 20px;
background-color: gray;
}
.input-box input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: white;
font-size: 16px;
}
.send-message {
background-color: gray;
color: white;
padding: 10px;
border-radius: 5px;
margin-left: 10px;
cursor: pointer;
}
.send-message:hover {
background-color: black;
}
.message {
margin-bottom: 10px;
padding: 10px;
border-radius: 5px;
}
.send {
background-color: gray;
color: white;
}
.receive {
background-color: green;
color: white;
}
.markdown {
font-size: 14px;
}
.color-btn {
position: absolute;
top: 20px;
right: 20px;
background-color: black;
color: white;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
.color-btn:hover {
background-color: gray;
}
.color-menu {
position: absolute;
top: 60px;
right: 20px;
background-color: black;
color: white;
padding: 10px;
border-radius: 5px;
display: none;
}
.color-menu ul {
list-style: none;
padding: 0;
margin: 0;
}
.color-menu li {
margin-bottom: 5px;
cursor: pointer;
}
.color-menu li:hover {
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<div class="chat-history" id="chat-history">
</div>
<div class="input-box">
<input type="text" id="message-input">
<div class="send-message" id="send-message">Send</div>
</div>
<div class="color-btn" id="color-btn">Color</div>
<div class="color-menu" id="color-menu">
<ul>
<li id="white">White</li>
<li id="black">Black</li>
<li id="green">Green</li>
<li id="red">Red</li>
<li id="pink">Pink</li>
<li id="purple">Purple</li>
<li id="dark-blue">Dark Blue</li>
<li id="dark-green">Dark Green</li>
<li id="orange">Orange</li>
</ul>
</div>
</div>
<script>
const chatHistory = document.getElementById('chat-history');
const messageInput = document.getElementById('message-input');
const sendMessage = document.getElementById('send-message');
const colorBtn = document.getElementById('color-btn');
const colorMenu = document.getElementById('color-menu');
const colors = {
white: 'white',
black: 'black',
green: 'green',
red: 'red',
pink: 'pink',
purple: 'purple',
'dark-blue': 'darkblue',
'dark-green': 'darkgreen',
orange: 'orange'
};
let currentColor = 'white';
<pre><code> function addMessage(message, type) {
const div = document.createElement('div');
div.classList.add('message');
if (type === 'send') {
div.classList.add('send');
} else {
div.classList.add('receive');
}
div.style.backgroundColor = colors[currentColor];
if (message.startsWith('# ')) {
const markdown = document.createElement('div');
markdown.classList.add('markdown');
markdown.innerHTML = marked(message.slice(2));
div.appendChild(markdown);
} else {
div.innerText = message;
}
chatHistory.appendChild(div);
chatHistory.scrollTop = chatHistory.scrollHeight;
}
function sendMessageToServer(message) {
// send message to server and receive response
}
sendMessage.addEventListener('click', () => {
const message = messageInput.value;
if (message) {
addMessage(message, 'send');
sendMessageToServer(message);
messageInput.value = '';
}
});
messageInput.addEventListener('keydown', (event) => {
if (event.keyCode === 13) {
const message = messageInput.value;
if (message) {
addMessage(message, 'send');
sendMessageToServer(message);
messageInput.value = '';
}
}
});
colorBtn.addEventListener('click', () => {
colorMenu.style.display = 'block';
});
colorMenu.addEventListener('mouseleave', () => {
colorMenu.style.display = 'none';
});
colorMenu.addEventListener('click', (event) => {
if (event.target.tagName === 'LI') {
const color = event.target.id;
currentColor = color;
chatHistory.style.backgroundColor = colors[currentColor];
colorMenu.style.display = 'none';
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lvY4 著作权归作者所有。请勿转载和采集!