筑坐极_js案例: 智能聊天机器人

还是先放效果图!

js案例: 智能聊天机器人

web部分:

<body>
<!--对话部分-->
<div class="chat" id="chat">
  <div style="height: 10px;"></div>
  <div class="c-item c-robot">
    <img src="../../assets/默认头像.jpg">
    <span>Hello~</span>
  </div>
  <!--<div class="c-item c-user">-->
  <!--<img src="../../assets/touxiang.jpg">-->
  <!--<span>这是问题</span>-->
  <!--</div>-->
</div>
<!--输入框部分-->
<div class="input">
  <div class="line"></div>
  <textarea id="i" placeholder="在这里输入内容, 摁Ctrl+Enter就可以回复了!"></textarea>
</div>
<!--手机端设置发送按钮-->
<button id="s">发送</button>
</body>

css部分:

<style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }
  html, body {
    height: 100%;
  }
  .chat {
    height: 70%;
    overflow-y: scroll;
    padding-left: 5px;
    padding-right: 5px;
  }
  .c-item {
    float: left;
    width: 100%;
    margin-bottom: 10px;
  }
  .c-item > img {
    width: 60px;
    border-radius: 50%;
  }
  .c-item > span {
    max-width: 60%;
    display: block;
    border: 1px solid #b9c0ca;
    background-color: #ffecf9;
    padding: 15px;
    border-radius: 10px;
  }
  .c-robot > img {
    float: left;
  }
  .c-robot > span {
    float: left;
    margin-left: 10px;
  }
  .c-user > img {
    float: right;
  }
  .c-user > span {
    float: right;
    margin-right: 10px;
    background-color: #d6f3ff;
    border: 1px solid #b9c0ca;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .line {
    height: 48px;
    border-top: 1px solid #b9c0ca;
  }
  .input {
    height: 30%;
  }
  #i {
    width: 96%;
    height: 65%;
    resize: none;
    border: 1px solid #b9c0ca;
    padding: 5px;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
    font-size: 16px;
    font-family: emoji;
    background-color: #f8fbe1;
  }
  .chat::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .chat::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background-color: #b9c0ca;
  }
  .chat::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #ededed;
  }
  #s {
    width: 76px;
    height: 40px;
    position: fixed;
    bottom: 24.5%;
    right: 40%;
    border: 1px solid #b9c0ca;
    background-color: #d3fbd3;
    border-radius: 10px;
    display: none;
  }
  @media screen and (max-width: 576px) {
    #s {
      display: block;
    }
  }
</style>

js部分:

<script type="text/javascript">
  window.onload = function () {
    let q = null;
    //组合键ctrl+Enter发送
    $('#i').keydown(function (event) {
      if (event.ctrlKey && event.keyCode === 13) {
        renderChat()
      }
    });
    //点击发送
    $('#s').click(function () {
      renderChat()
    });

    //渲染对话
    function renderChat() {
      q = $("#i").val();
      if (!q.replace(/\s+/g, '')) {
        return;
      }
      $('#i').val('');
      $('#chat').append('<div class="c-item c-user"><img src="../../assets/touxiang.jpg"><span>' + q + '</span></div>');
      ans();
      $('#chat').append('<div class="c-item c-robot"><img src="../../assets/默认头像.jpg"><span>' + randomReply() + '</span></div>');
      downPull();
    }

    //生成指定范围内随机数
    function randInt(minRange, maxRange) {
      return parseInt(Math.random() * (maxRange - minRange + 1)) + minRange
    }

    //生成临时随机回复
    function randomReply() {
      let rps = [
        "正在输入...",
        // "正在调取数据...",
        // "稍等,回复已经在路上了...",
        // "这个问题很难,我得思考一下...",
      ];
      return rps[randInt(0, rps.length - 1)]
    }

    //生成未知回复
    function randomReplyUn() {
      let rps = [
        "许愿龙正在积极学习中...",
        "这个问题是收费的...",
        "不要难为我嘛..."
      ];
      return rps[randInt(0, rps.length - 1)]
    }

    //聊天记录下拉
    function downPull() {
      $('.chat').scrollTop(9999999999)
    }

    //获取回复
    function ans() {
      $.ajax({
        url: '接口地址',
        data: {
          question: q,
          appCode: '这里输入自己的appCode'
        },
        type: 'POST',
        dataType: 'json',
        success(data) {
          let res = data.result.content;
          if (res === 'defaultReply') {
            $('.c-robot>span:last').text(randomReplyUn())
          } else {
            $('.c-robot>span:last').text(res)
          }
          downPull()
        },
        error(err) {
          // err.status;   404 没找到
          // err.status;   500 后台报错
          // err.status;   0 后台报错
          switch (err.status) {
            case 404:
              $('.c-robot>span:last').text('程序发生了错误,程序猿正在积极抢救中~');
              break;
            case 500:
              $('.c-robot>span:last').text('程序发生了错误,程序猿正在积极抢救中~');
              break;
            case 0:
              $('.c-robot>span:last').text('请检查您的网络连接状况~');
              break;
            default:
              $('.c-robot>span:last').text('程序发生了未知错误,请联系站点管理员~');
              break;
          }
        }
      })
    }
  }
</script>

申请接口链接:

https://apis.baidu.com/store/detail/eef864e1-6f2e-4631-befc-5afe35cab769

js案例: 智能聊天机器人

韩佳*

js, WebStorm

利用js调用接口制作智能聊天页面

2021.07.07

833人

韩佳*

天津市南开区

Hot:20084

韩佳*

当前作品暂无评分

还未获得评语哦~