ajax练习——聊天机器人

一点甜甜的

已于 2022-02-20 22:10:24 修改

阅读量782

点赞数 1

文章标签： ajax javascript 前端

于 2022-02-20 22:06:48 首次发布

(´▽`)ﾉ

本文链接：https://blog.csdn.net/w1311004532/article/details/123036856

版权

一、效果演示

二、代码

html

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../HTML+CSS/base.css"><!--页面初始化-->
    <link rel="stylesheet" href="main.css"><!--样式-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </head>
    <body>

    <div class="warp">
        <!--顶栏-->
        <header>
        <h3>胖虎</h3>
        <img src="http://photogz.photo.store.qq.com/psc?/V10rvOd644y8gv/9vuGDcz9AP*EJeMjs9i.nqVCq1wc6sjnq8E3TEF0adKeAoX6wGVl.g6sE.fnURY.fh9k48epYt4lgY1TMH.tiEd3noArr4q8elUsHqe2VR8!/b&bo=vAK8ArwCvAIRGS4!&rf=viewer_4" alt="">
        </header>
        <!--中间部分-->
        <div class="main">
            <ul class="talk_list">
                <li class="left_word">
                    <img src="http://photogz.photo.store.qq.com/psc?/V10rvOd644y8gv/9vuGDcz9AP*EJeMjs9i.nqVCq1wc6sjnq8E3TEF0adKeAoX6wGVl.g6sE.fnURY.fh9k48epYt4lgY1TMH.tiEd3noArr4q8elUsHqe2VR8!/b&bo=vAK8ArwCvAIRGS4!&rf=viewer_4" alt="">
                    <span>嗨，最近想我没有？</span>
                </li>

            </ul>
            <div class="drag_bar"></div>
        </div>
        <!--底部-->
        <footer>
            <img src="https://photogz.photo.store.qq.com/psc?/V10rvOd60lRH5G/xZikVHqhLrt9jsfqm9tF*Y29SMyKgGmERaw*3PP.7PCbHN7eykGGj3rCahQLWp.wXnr6NXu4dt5KrXg8744o8w!!/mnull&bo=*wH*Af8B*wERCT4!&rf=photolist&t=5" alt="">
            <input type="text" placeholder="说点什么吧..." id="ipt">
            <button id="btnSend">发送</button>
        </footer>
    </div>
    <!--语音播放-->
    <audio src="" autoplay="autoplay"></audio>
    <script src="index.js"></script>

    </body>
</html>

css


.warp{
    position: fixed;
    top: 20px;
    bottom: 20px;
    transform: translateX(-50%);
    left: 50%;
    width: 450px;
    box-shadow: #0000003b 0 0 9px 1px;
    border-radius: 10px;
    overflow: hidden
    }
header{
    display: flex;
    justify-content: space-between;
    height: 55px;
    background-image: linear-gradient(to right, #f98a83 , #b388f6);
    }
h3{
    line-height: 55px;
    margin-left: 25px;
    color: white;
    font-size: 18px;
    }

img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    }
header img{
    margin-top: 8px;
    margin-right: 25px;
    }
.main{
    width: 100%;
    background-color: #f4f3f3;
    position: absolute;
    overflow: auto;
    padding:0 20px 0;
    bottom: 55px;
    top: 55px;
    }
.talk_list li{
    display: flex;
    margin: 20px 0 30px;
    }
.talk_list span::before{
    top: -3px;
    position: absolute;
    }
.left_word span::before{
    left: -11px;
    content: url("E:/前端学习/教学素材/黑马ajax/day1/code/聊天机器人/img/corner01.png");
    }
.talk_list span{
    position: relative;
    display: inline-block;
    line-height: 22px;
    padding: 12px 15px 12px;
    font-size: 16px;
    border-radius: 10px;
    max-width: 290px;
    word-wrap:break-word;/*强制换行*/
    }
.left_word span {
    color: white;
    background-color: #fe9697;
    margin-left: 13px;
    }
footer{
    height: 55px;
    }
.right_word{
   display: flex;
    flex-direction: row-reverse;
    }
.right_word span{
    background-color: #fff;
    margin-right: 15px;
    }
.right_word span::before{
    right: -11px;
    content: url("E:/前端学习/教学素材/黑马ajax/day1/code/聊天机器人/img/corner02.png");
    }
footer{
    background-color: #fff;
    padding: 0 15px;
    align-items: center;
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    height: 55px;
    
    }
footer input,
footer button{
    height: 37px;
    border: 0;
    border-radius: 5px;
    }
footer input{
    padding: 8px;
    flex:1;
    margin: 0 15px 0;
    background-color:#f4f3f3;
    font-size: 14px;
    color: #949494;
    }
footer button{
    font-size: 14px;
    color: white;
    width: 60px;
    background-color: #fe9697;
    }
/*定义默认的滚动条样式*/
/* 定义滚动条样式 */
::-webkit-scrollbar {
    position: absolute;
    width: 7px;
    height: 6px;
    background-color: rgba(240, 240, 240, 1);
    }

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: white;
    }

/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(28, 15, 15, 0.5);
    background-color: rgb(16 9 9 / 20%);
    }

  // 把表单内的内容渲染到页面
  let btnSend =  document.querySelector('#btnSend'),
      ipt =  document.querySelector('#ipt'),
      talk_list =   document.querySelector('.talk_list'),
      audio = document.querySelector('audio')
  btnSend.addEventListener('click', function() {/*点击发送事件*/

    if (ipt.value.trim().length !== 0) {/*文字框有内容*/

      // 把标签拼上表单内容，插入到结构中
      let spendHtml= `<li class="right_word"><img src="https://photogz.photo.store.qq.com/psc?/V10rvOd60lRH5G/xZikVHqhLrt9jsfqm9tF*Y29SMyKgGmERaw*3PP.7PCbHN7eykGGj3rCahQLW.wXnr6NXu4dt5KrXg8744o8w!!/mnull&bo=*wH*Af8B*wERCT4!&rf=photolist&t=5" alt=""><span>${ipt.value.trim()}</span></li>`;
      talk_list.insertAdjacentHTML('beforeend', spendHtml);/*实现同时创建与插入*/
      getReply()
      scrollToBottom();/*出现新li就让他滚出来*/
      ipt.value ='';
    }
  });
  document.addEventListener('keyup',function(e) {
    if(e.key==='Enter'){/*按下回车*/
      btnSend.click(); /*触发发送键的点击*/
    }
  })
  // 获取回复信息
  function getReply() {
    $.ajax({
      type:'GET',
      url:'http://www.liulongbin.top:3006/api/robot',
      data:{
        spoken:ipt.value.trim()
      },
      success:function(res){
       let reply = res.data.info.text;/*得到回复的信息*/
        let  replyHtml = ` <li class="left_word"><img src="http://photogz.photo.store.qq.com/psc?/V10rvOd644y8gv/9vuGDcz9AP*EJeMjs9i.nqVCq1wc6sjnq8E3TEF0adKeAoX6wGVl.g6sE.fnURY.fh9k48epYt4lgY1TMH.tiEd3noArr4q8elUsHqe2VR8!/b&bo=vAK8ArwCvAIRGS4!&rf=viewer_4" alt=""><span>${res.data.info.text}</span></li>`;/*回复信息拼接结构*/
        talk_list.insertAdjacentHTML('beforeend',replyHtml) /*插入到聊天页面*/
        getVoice(reply);/*把文本传输进获取语音函数*/
        scrollToBottom();/*出现新li就让他滚出来*/
      }

    })
  }
  //获取回复信息的语音链接，并使用audio播放
  function getVoice(text) {
    $.ajax({
      type:'GET',
      url:'http://www.liulongbin.top:3006/api/synthesize',
      data:{
        text:text/*参数就是机器人的回复*/
      },
      success:function(res){
        audio.src=res.voiceUrl;/*获得语音链接*/
        audio.play();/*播放语音*/
      }
    })
  }

  // 让滚动条始终滚动到最底部
  function scrollToBottom() {
    let newMsg = document.querySelector('.talk_list').lastElementChild;/*最新的一个li*/
    newMsg.scrollIntoView();/*让最新的li出现在可视区*/
  }