【JS功能】JavaScript实现简易聊天对话框

旺旺大力包

已于 2024-03-27 21:41:35 修改

阅读量226

点赞数 3

分类专栏：笔记合集前端知识库 CSS 文章标签： javascript 开发语言 ecmascript 笔记前端

于 2024-03-26 22:03:24 首次发布

本文链接：https://blog.csdn.net/leoxingc/article/details/137059362

版权

前端知识库同时被 3 个专栏收录

21 篇文章 8 订阅

订阅专栏

CSS

10 篇文章 3 订阅

订阅专栏

笔记合集

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>聊天对话框</title>
    <style type="text/css">
      * {
        font-size: 14px;
        padding: 0;
        margin: 0;
      }
      .main {
        position: relative;
        margin: 20px auto;
        border: 1px solid steelblue;
        width: 430px;
        height: 400px;
      }
      .msgInput {
        display: block;
        width: 406px;
        height: 60px;
        margin: 10px auto;
      }
      .sendbtn {
        position: absolute;
        width: 100px;
        height: 29px;
        bottom: 5px;
        right: 10px;
      }
      .content {
        list-style: none;
        width: 410px;
        height: 280px;
        margin: 5px auto;
        border: 1px dotted #d1d3d6;
        overflow-y: scroll;
      }
      .msgContent {
        width: auto;
        max-width: 250px;
        height: auto;
        word-break: break-all;
        margin: 5px;
        padding: 3px;
        border-radius: 5px;
      }

      .content .left {
        float: left;
        text-align: left;
        background-color: lightgrey;
      }
      .content .right {
        float: right;
        text-align: right;
        background-color: yellowgreen;
      }
    </style>
    <script type="text/javascript">
      window.onload = function () {
        //		li.scrollIntoView();//将元素滚动到可见位置
      };
    </script>
  </head>

  <body>
    <div id="main" class="main">
      <ul id="content" class="content">
        <li class="msgContent left">hello?</li>
        <div style="clear: both"></div>
        <li class="msgContent left">hello</li>
        <div style="clear: both"></div>
        <li class="msgContent right">hi</li>
        <div style="clear: both"></div>
        <li class="msgContent left">hehe</li>
        <div style="clear: both"></div>
        <li class="msgContent left">goodbye</li>
        <div style="clear: both"></div>
        <li class="msgContent right">。。。。</li>
        <div style="clear: both"></div>
        <li class="msgContent right">
          sdfasdsadfassdfsdfsdfdsfsdfsdfsdfdfasdffasdfasfdasd fasd fasd
          fasdfasdfasdf
        </li>
        <div style="clear: both"></div>

        <li class="msgContent right">aaa</li>
        <div style="clear: both"></div>
      </ul>
      <textarea id="msg_input" class="msgInput"></textarea>
      <button id="sendbtn" class="sendbtn">发送</button>
    </div>

    <script>
      /* 
			1- 找到元素
			2- 给btn添加点击事件，
			3- 点击的时候获取输入框的值，
			根据值创建 li和div 添加到ul里面
		 */
      //  1
      let sendbtn = document.querySelector("#sendbtn");
      let msg_input = document.querySelector("#msg_input");
      let content = document.querySelector("#content");

      //2
      sendbtn.onclick = function () {
        sendMsg();
      };

      document.onkeydown = function (evt) {
        if (evt.keyCode == 13 && evt.ctrlKey) {
          //ctrl a
          sendMsg();
        }
      };

      function sendMsg() {
        let str = msg_input.value;
        console.log(str);
        //3
        let newLi = document.createElement("li");
        newLi.innerHTML = str;
        content.appendChild(newLi);
        newLi.className = "msgContent right";

        let oDiv = document.createElement("div");
        oDiv.style.clear = "both";
        content.appendChild(oDiv);

        newLi.scrollIntoView();
        msg_input.value = "";
      }
    </script>
  </body>
</html>