帮我把刚才的对话框html页面中我输入的内容在右边展示
时间: 2023-11-27 12:55:17 浏览: 36
好的,可以通过以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>对话框</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.messages {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
padding: 10px;
}
.message {
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
}
.message-text {
background-color: #eff0f1;
border-radius: 10px;
padding: 10px;
max-width: 60%;
word-wrap: break-word;
}
.input {
display: flex;
justify-content: space-between;
background-color: #eff0f1;
padding: 10px;
}
.input-box {
flex: 1;
margin-right: 10px;
}
.input-button {
font-weight: bold;
padding: 5px 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="messages" id="messages"></div>
<div class="input">
<input type="text" class="input-box" id="input-box" />
<button class="input-button" onclick="sendMessage()">发送</button>
</div>
</div>
<script>
function sendMessage() {
const message = document.getElementById("input-box").value;
addMessage(message, "right");
}
function addMessage(text, position) {
const messageContainer = document.createElement("div");
const messageText = document.createElement("div");
messageContainer.classList.add("message");
messageText.classList.add("message-text");
messageText.innerText = text;
messageContainer.appendChild(messageText);
if (position === "right") {
messageContainer.style.justifyContent = "flex-end";
}
document.getElementById("messages").appendChild(messageContainer);
document.getElementById("input-box").value = "";
}
</script>
</body>
</html>
```
其中,对话框分为两部分,左侧为展示消息的区域,右侧为输入消息的区域。当用户在输入框中输入消息并点击发送按钮后,会调用 `sendMessage` 函数,该函数获取输入框中的内容并调用 `addMessage` 函数将消息添加到展示区域中。`addMessage` 函数接收两个参数,分别是消息文本和消息位置,位置为 `"right"` 表示消息在右侧展示,否则为左侧展示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)