前端技术(23) : 聊天页面

来源: GPT生成之后微调
效果图

HTML代码

html 复制代码
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>聊天</title>
		<style>
			body {
				font-family: Arial, sans-serif;
				margin: 0;
				padding: 0;
			}

			.container {
				display: flex;
				height: 100vh;
			}

			.contact-list {
				flex: 1;
				background-color: #f4f0ff;
				/* 浅紫色背景 */
				padding: 20px;
				max-width: 300px;
				border-right: 1px solid #DDD;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				gap: 10px;
			}

			.contact {
				padding: 10px 20px;
				cursor: pointer;
				transition: background-color 0.3s;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.contact.active {
				background-color: #e6d5ff;
				/* 选中联系人更深的紫色背景 */
			}

			.contact-name {
				font-weight: bold;
			}

			.contact-status {
				width: 10px;
				height: 10px;
				border-radius: 50%;
			}

			.status-online {
				background-color: #0F0;
				/* 在线状态的颜色 */
			}

			.status-offline {
				background-color: #F00;
				/* 离线状态的颜色 */
			}

			.status-away {
				background-color: #FF0;
				/* 离开状态的颜色 */
			}

			.conversation {
				flex: 2;
				background-color: #f9f7ff;
				/* 淡紫色对话窗口 */
				padding: 20px;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
			}

			.message-container {
				flex: 1;
				overflow-y: auto;
				padding: 10px;
				display: flex;
				flex-direction: column;
			}

			.message {
				padding: 10px;
				margin: 20px;
				max-width: 70%;
				word-wrap: break-word;
				border-radius: 10px;
				box-shadow: 2px 2px 5px #ccc;
				display: inline-block;
				clear: both;
			}

			.message-time {
				font-size: 12px;
				color: #666;
				position: absolute
				margin-left: 10px;
				float: right;
			}

			.user-message {
				background-color: #baf2ff;
				/* 浅蓝色用户消息气泡 */
				align-self: flex-end;
			}

			.contact-message {
				background-color: #f7e7ff;
				/* 淡紫色联系人消息气泡 */
				align-self: flex-start;
			}

			.input-container {
				display: flex;
				align-items: center;
			}

			.message-input {
				flex: 1;
				padding: 10px;
				margin: 10px;
				box-sizing: border-box;
				border: 1px solid #DDD;
				border-radius: 5px;
				background-color: #f4f0ff;
				/* 浅紫色背景 */
				resize: none;
				/* 禁止用户调整文本域大小 */
				font-size: 18px;
			}

			.send-button {
				padding: 10px 20px;
				margin: 10px;
				border: none;
				background-color: #8a4d76;
				/* 深紫色按钮 */
				color: #FFF;
				border-radius: 5px;
				cursor: pointer;
			}

			h2 {
				margin-top: 0;
				padding-top: 10px;
				color: #8a4d76;
				/* 深紫色标题 */
			}

			h3 {
				margin-top: 0;
				padding-top: 10px;
				color: #8a4d76;
				/* 深紫色标题 */
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="contact-list">
				<h2>联系人列表</h2>
				<div class="contact active" onclick="changeActive(this)">
					<span class="contact-name">联系人1</span>
					<div class="contact-status status-online"></div>
				</div>
				<div class="contact" onclick="changeActive(this)">
					<span class="contact-name">联系人2</span>
					<div class="contact-status status-offline"></div>
				</div>
				<div class="contact" onclick="changeActive(this)">
					<span class="contact-name">联系人3</span>
					<div class="contact-status status-away"></div>
				</div>
			</div>
			<div class="conversation" id="conversation">
				<h3 id="current-contact">联系人姓名</h3>
				<div class="message-container" id="message-container">
				</div>
				<div class="input-container">
					<textarea class="message-input" id="message-input" placeholder="Enter 发送, ALT+回车 换行"
						rows="8"></textarea>
					<!-- <button class="send-button" onclick="sendMessage()">发送</button> -->
				</div>
			</div>
		</div>

		<script>
			function changeActive(element) {
				var contactList = document.getElementsByClassName('contact');
				for (var i = 0; i < contactList.length; i++) {
					contactList[i].classList.remove('active');
				}
				element.classList.add('active');
				document.getElementById('current-contact').innerText = element.querySelector('.contact-name').innerText;
			}

			// 监听键盘事件
			document.getElementById('message-input').addEventListener('keydown', function(e) {
				if (e.key === 'Enter' && !e.altKey) { // 按下 Enter 键发送消息
					e.preventDefault(); // 阻止默认换行行为
					sendMessage();
				} else if (e.key === 'Enter' && e.altKey) { // 按下 Alt+Enter 换行
					this.value += '\n';
				}
			});

			function sendMessage() {
				var messageInput = document.getElementById('message-input').value;
				var messageContainer = document.getElementById('message-container');
				var div = document.createElement('div');
				div.className = 'message user-message';
				div.innerHTML =   messageInput+'</br></br><span class="message-time">12:35 PM</span>';
				div.style.whiteSpace = 'pre-wrap';
				messageContainer.appendChild(div);
				messageContainer.scrollTop = messageContainer.scrollHeight;
				document.getElementById('message-input').value = '';

				// 模拟对方回复消息
				setTimeout(function() {
					var replyDiv = document.createElement('div');
					replyDiv.className = 'message contact-message';
					replyDiv.innerHTML = messageInput+'</br></br><span class="message-time">12:35 PM</span>';
					replyDiv.style.whiteSpace = 'pre-wrap';
					messageContainer.appendChild(replyDiv);
					messageContainer.scrollTop = messageContainer.scrollHeight;
				}, 1000);
			}
		</script>
	</body>
</html>