在线聊天页面 - 实时聊天应用，支持Markdown语法 - 常规

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>在线聊天页面 - 实时聊天应用，支持Markdown语法</title>
	<style>
		body {
			background-color: #fff;
			font-family: Arial, sans-serif;
			font-size: 16px;
			line-height: 1.5;
			margin: 0;
			padding: 0;
		}
<pre><code>	#chat-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		padding: 20px;
	}

	#chat-history {
		flex: 1;
		overflow-y: scroll;
		background-color: #fff;
		padding: 10px;
		border: 1px solid #ccc;
	}

	#chat-input {
		height: 20%;
		background-color: #ccc;
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#chat-input input {
		flex: 1;
		background-color: #fff;
		padding: 10px;
		border: none;
		outline: none;
		font-size: 16px;
		line-height: 1.5;
	}

	#chat-input input:focus {
		background-color: #eee;
	}

	.chat-message {
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 5px;
	}

	.chat-message.sent {
		background-color: #ccc;
	}

	.chat-message.received {
		background-color: #c8f2be;
	}

	#chat-color {
		position: fixed;
		top: 20px;
		right: 20px;
		background-color: #000;
		color: #fff;
		padding: 10px;
		border-radius: 5px;
		cursor: pointer;
	}

	#color-menu {
		position: absolute;
		top: 50px;
		right: 20px;
		background-color: #000;
		color: #fff;
		padding: 10px;
		border-radius: 5px;
		display: none;
		z-index: 1;
	}

	#color-menu ul {
		list-style: none;
		padding: 0;
		margin: 0;
	}

	#color-menu li {
		display: inline-block;
		margin-right: 10px;
		cursor: pointer;
	}

	#color-menu li:hover {
		text-decoration: underline;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<div id="chat-container">
		<div id="chat-history"></div>
		<div id="chat-input">
			<input type="text" placeholder="输入聊天内容，按enter发送">
		</div>
	</div>
	<div id="chat-color">调整背景颜色</div>
	<div id="color-menu">
		<ul>
			<li data-color="#fff">白色</li>
			<li data-color="#000">黑色</li>
			<li data-color="#00ff00">绿色</li>
			<li data-color="#ff0000">红色</li>
			<li data-color="#ff69b4">粉色</li>
			<li data-color="#800080">紫色</li>
			<li data-color="#00008b">深蓝色</li>
			<li data-color="#556b2f">墨绿色</li>
			<li data-color="#ffa500">橙色</li>
		</ul>
	</div>
<pre><code>&lt;script&gt;
	// 获取页面元素
	const chatHistory = document.getElementById('chat-history');
	const chatInput = document.querySelector('#chat-input input');
	const chatColor = document.getElementById('chat-color');
	const colorMenu = document.getElementById('color-menu');
	const colorList = document.querySelectorAll('#color-menu li');

	// 定义变量
	let username = 'Guest'; // 用户名为Guest
	let bgColor = '#fff'; // 聊天历史记录的背景色为白色

	// 定义发送消息函数
	function sendMessage() {
		const text = chatInput.value;
		if (text.trim() !== '') {
			// 创建发送的消息元素
			const message = document.createElement('div');
			message.classList.add('chat-message', 'sent');
			message.innerHTML = `&lt;p&gt;${marked(text)}&lt;/p&gt;&lt;span&gt;${username}&lt;/span&gt;`;
			chatHistory.appendChild(message);

			// 向后端发送请求
			const url = 'http://localhost:8089/chat';
			const data = { text };
			fetch(url, {
				method: 'POST',
				body: JSON.stringify(data),
				headers: {
					'Content-Type': 'application/json'
				}
			})
			.then(response =&gt; response.json())
			.then(response =&gt; {
				// 创建返回的消息元素
				const message = document.createElement('div');
				message.classList.add('chat-message', 'received');
				message.innerHTML = `&lt;p&gt;${marked(response.message)}&lt;/p&gt;&lt;span&gt;${response.username}&lt;/span&gt;`;
				chatHistory.appendChild(message);
			})
			.catch(error =&gt; console.error(error));

			// 清空输入框
			chatInput.value = '';
		}
	}

	// 监听输入框的keydown事件，如果按下enter键就发送消息
	chatInput.addEventListener('keydown', event =&gt; {
		if (event.keyCode === 13) {
			event.preventDefault();
			sendMessage();
		}
	});

	// 监听调整颜色按钮的click事件，显示颜色菜单
	chatColor.addEventListener('click', () =&gt; {
		colorMenu.style.display = 'block';
	});

	// 监听颜色菜单的click事件，改变页面颜色
	colorList.forEach(color =&gt; {
		color.addEventListener('click', () =&gt; {
			bgColor = color.dataset.color;
			document.body.style.backgroundColor = bgColor;
			chatHistory.style.backgroundColor = bgColor === '#fff' ? '#fff' : '#eee';
			chatInput.style.backgroundColor = bgColor === '#fff' ? '#ccc' : '#eee';
			colorMenu.style.display = 'none';
		});
	});

	// 使用marked.js将聊天信息解析为HTML
	function marked(text) {
		const renderer = new marked.Renderer();
		renderer.paragraph = text =&gt; `&lt;p&gt;${text}&lt;/p&gt;`;
		return marked(text, { renderer });
	}
&lt;/script&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/marked/marked.min.js&quot;&gt;&lt;/script&gt;
</code></pre>
</body>
</html>