时间戳

首页 > 解决方案 > 无法创建信使式聊天流

javascript - 无法创建信使式聊天流

问题描述

我无法使用 HTML、CSS 和 JavaScript 创建信使风格的聊天流。我想只使用这三种语言来创建应用程序。

我正在粘贴我的 HTML、CSS 和 JavaScript 代码。我真的很感谢其他程序员的帮助。

HTML

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Somdutt's Chatbot</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="Chat-Bar-Collapsible">
        <button class="Collapsible-Button">Chat With Me!</button>
        <div class="Chat-Container">
            <div class="chat-window">
                <p class="user-message"></p>
            </div>
            <div class="Menu">
                <div><input type="text" class="text-field" placeholder="Ask Questions"></div>
                <div><button class="clear-button">Clear</button></div>
            </div>
        </div> 
    </div>   
</body>
<script src="script.js"></script>
</html>

CSS：

    body{
    background-color: grey;
}
.Chat-Bar-Collapsible {
    position: absolute;
    right: 0px;
    bottom: 0px;
    margin-right: 30px;
    margin-bottom: 10px;
}

.Collapsible-Button {
    border-radius: 10px;
    padding: 10px 150px;
    background-color: indigo;
    color: lavender;
    cursor: pointer;
}

.Chat-Container {
    width: 100%;
    height: 450px;
    border-radius: 10px;
    border: 2px solid indigo;
    display: none;
    overflow: hidden;
    background-color: white;
   
}

.Menu {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 40px;
    padding-top: 10px;
    border-radius: 10px;
    background-color: rgb(55, 0, 255);
    display: flex;
    justify-content:space-between;
}

.text-field {
    position: absolute;
    border-radius: 5px;
    padding-top: 10px;
    font-size: 20px;
}
.clear-button{
    border-radius: 5px;
    font-size: 30px;
}

p.user-message {
    position: absolute;
    bottom: 120px;
    right: 15px;
    color: green
}

p.bot-message {
    position: absolute;
    top: 200px;
    left: 3px;
    color: red;
}

.chat-window{
    position: absolute;
    height: 82%;
    width: 100%;
    background-color:white;
    border-radius: 10px;
    max-height: 100%;
    overflow-y: scroll;
}

JavaScript：

 let coll = document.querySelector('.Collapsible-Button')

      coll.addEventListener("click", function() {
      var content = this.nextElementSibling;
      if (content.style.display === "block") {
        content.style.display = "none";
      } else {
        content.style.display = "block";
      }
    });

document.querySelector('.text-field').addEventListener('keypress', function(e){
  if(e.key === 'Enter'){
    let para = document.createElement('p');
    para.style.right = '0 px'
    let userMsg = document.querySelector('.text-field').value;
    let text = document.createTextNode(userMsg);
    para.appendChild(text);
    let userDisplay = document.querySelector('.chat-window').appendChild(para);
  }
})

我知道我正在使用用户响应并将文本附加到用户响应段落。相反，我希望整个聊天流程采用信使风格。我尝试在 Google 中查找，但找不到合适的解释。另外，如果有任何方法可以将其格式化为 Messenger 风格的流程，请告诉我。

标签： javascripthtmlcss

解决方案

推荐阅读