写一个可以对话的页面上面对话下面结果按回车可以发送消息
很好的提议，让我来帮你实现吧。
首先，我们需要一个 HTML 页面，页面结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>对话页面</title>
</head>
<body>
<div id="dialogue">
<!-- 对话内容显示区域 -->
</div>
<input type="text" id="input" />
<!-- 输入框 -->
<button id="send-btn">发送</button>
<!-- 发送按钮 -->
<script src="dialogue.js"></script>
<!-- 引入 JavaScript 文件 -->
</body>
</html>
接下来，我们需要编写 JavaScript 文件，实现对话功能。
const dialogue = document.getElementById('dialogue')
const input = document.getElementById('input')
const sendBtn = document.getElementById('send-btn')
sendBtn.addEventListener('click', sendMessage)
input.addEventListener('keyup', function(event) {
if (event.keyCode === 13) {
sendMessage()
}
})
function sendMessage() {
const message = input.value
if (!message) return
const messageEl = document.createElement('div')
messageEl.innerText = message
messageEl.classList.add('message')
dialogue.appendChild(messageEl)
input.value = ''
// 模拟回复消息
setTimeout(function() {
const replyEl = document.createElement('div')
replyEl.innerText = `回复：${message}`
replyEl.classList.add('reply')
dialogue.appendChild(replyEl)
}, 1000)
}
上面的代码通过监听发送按钮的点击事件和输入框的回车事件，获取输入框中的内容，并将其显示在对话框中。然后，模拟一个回复消息，并将其添加到对话框中。
最后，我们需要为对话框和回复消息添加样式，让页面看起来更加美观。
#dialogue {
width: 400px;
height: 300px;
border: 1px solid #ccc;
overflow-y: scroll;
}
.message {
padding: 10px;
background-color: #eee;
margin-bottom: 10px;
}
.reply {
padding: 10px;
background-color: #f5f5f5;
text-align: right;
margin-bottom: 10px;
}
好了，现在打开页面，输入一些内容，点击发送或按回车键，就可以开始对话了。
原文地址: https://www.cveoy.top/t/topic/CDp 著作权归作者所有。请勿转载和采集!