当前位置：首页 > article >正文

原生JS实现聊天窗口

article 2025/1/21 5:53:02

弹窗页面的样式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    .talk_con {
      width: 600px;
      height: 500px;
      border: 1px solid #666;
      margin: 50px auto 0;
      background: #f9f9f9;
    }
    .talk_show {
      width: 580px;
      height: 420px;
      border: 1px solid #666;
      background: #fff;
      margin: 10px auto 0;
      overflow: auto;
    }
    .talk_input {
      width: 580px;
      margin: 10px auto 0;
    }
    .whotalk {
      width: 30px;
      height: 30px;
      float: left;
      outline: none;
    }
    .talk_word {
      width: 420px;
      height: 26px;
      padding: 0px;
      float: left;
      margin-left: 10px;
      outline: none;
      text-indent: 10px;
    }
    .talk_sub {
      width: 56px;
      height: 30px;
      float: left;
      margin-left: 10px;
    }
    .atalk {
      margin: 10px;
    }
    .atalk span {
      display: inline-block;
      background: #0181cc;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
    .btalk {
      margin: 10px;
      text-align: right;
    }
    .btalk span {
      display: inline-block;
      background: #ef8201;
      border-radius: 10px;
      color: #fff;
      padding: 5px 10px;
    }
  </style>
  <script type="text/javascript" src="/static/assets/js/jquery-3.5.1.min.js"></script>
  <script type="text/javascript">
    window.onload = function() {
      
      $("input").keypress(function (e) {
        if(e.which == 13){//检测回车键
          //执行回车事件
          send();
        }
      });
    }

    function send(){
      var Words = document.getElementById("words");
      var Who = document.getElementById("who");
      var TalkWords = document.getElementById("talkwords");
      var TalkSub = document.getElementById("talksub");
      //定义空字符串
      var str = "";
      if (TalkWords.value == "") {
        // 消息为空时弹窗
        alert("消息不能为空");
        return;
      }
      var word = TalkWords.value
      document.getElementById("talkwords").value="";

      str = '<div class="btalk"><span>' + word + '</span></div>';
      Words.innerHTML = Words.innerHTML + str;
      add();

      $.ajax({
        url: '/AiController/query',
        type: 'post',
        data: {
          content: word,
        },
        beforeSend: function() {
          $("body").append('<div id="load" style="position:fixed;top:30%;z-index:1200;background:url(/static/admin/images/loading.gif) top center no-repeat;width:100%;height:140px;margin:auto auto;"></div>');
        },
        complete: function () {
          $("#load").remove();
        },
        success: function (res) {
          console.log(res);
          var response = res.msg;
          str = '<div class="atalk"><span>' + response + '</span></div>';
          Words.innerHTML = Words.innerHTML + str;
          add();
        }
      });

    }

    function add() {

      document.getElementById('words').scrollTop = document.getElementById('words').scrollHeight

    }

  </script>
</head>
<body>
<div class="talk_con">
  <div class="talk_show" id="words">
    <div class="atalk"><span id="asay">您好：我是您的智能小助手Hibiki</span></div>
    <div class="btalk"><span id="bsay">你好</span></div>
  </div>
  <div class="talk_input">
    <input type="text" class="whotalk" id="who" value="输入" disabled>
    <input type="text" class="talk_word" id="talkwords">
    <input type="button" value="发送" class="talk_sub" id="talksub" onclick="send()">
  </div>
</div>
</body>
</html>

在使用的页面引入按钮

<button class="pear-btn pear-btn-warming pear-btn-md" onclick="message()" title="智能小助手"><i class="layui-icon layui-icon-template"></i>
</button>

用layui打开弹窗

function message(){
  layer.open({
    //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    type:2,
    title:"智能助手",
    area: ['50%','85%'],
    content:  rootPath + "/AiController/view"
  });
}

用js打开弹窗

var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
var popupWidth = 1000;
var popupHeight = 600;
var left = (screenWidth - popupWidth)/2;
var top = (screenHeight - popupHeight)/2;
var popupWindow = window.open('AI.html', 'popup', 'width=' + popupWidth + ',height=' + popupHeight + ',left=' + left + ',top=' + top);