筑坐极_js示例：百度智能机器人问答

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

代码部分:

html:

<div class="chat">


  <div style="height: 10px;"></div>

  <div class="c-item c-robot">
    <img src="../../assets/imgs/男生.jpg">
    <span class="ss">嗨，我是智能机器人
        </span>
  </div>
</div>


<div class="input">
  <div style="height: 5px;"></div>
  <textarea id="i"
            onkeyup="s(event)" onblur="it(this.value)" placeholder="在这里输入内容, 摁Ctrl+Enter就可以回复了!"></textarea>
</div>


<button id="s">发送</button>

css：

<style type="text/css">

  * {
    padding: 0;
    margin: 0;
  }

  html, body {
    height: 100%;
  }

  .chat {
    height: 80%;
    overflow-y: scroll;
    padding-left: 5px;
    padding-right: 5px;
  }

  .c-item {
    float: left;
    width: 100%;
    margin-bottom: 10px;
  }

  .c-item > img {
    width: 50px;
    border-radius: 10px;
  }

  .c-item > span {
    max-width: 70%;
    display: block;
    background: #333;
    color: white;
    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: white;
    color: #333;
    border: 1px solid black;
    padding-top: 14px;
    padding-bottom: 14px;

  }

  .input {
    height: 20%;
  }

  #i {
    width: 90%;
    height: 75%;
    resize: none;
    border: 1px solid black;
    padding: 5px;
    display: block;
    margin: 0 auto;
    border-radius: 6px;
    font-size: 16px;
    font-family: emoji;

  }


  .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: #535353;
  }

  .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: 38px;
    position: fixed;
    bottom: 21%;
    right: 40%;
    border: none;
    background: #333;
    color: white;
    border-radius: 6px;
    display: none;
  }

  @media screen and (max-width: 576px) {
    #s {
      display: block;
    }
  }


</style>

js：

<script type="text/javascript">
      window.onload = function () {

        let q = null;

        //'发送'按钮被点击时
        $("#s").click(function () {
          renderChat();
        });

        //摁了组合键Ctrl+Enter:
        $("#i").keyup(function (event) {
          if (event.ctrlKey && event.which === 13) {
            renderChat();
          }
        });

        //创建函数 - 渲染对话
        function renderChat() {
          q = $("#i").val();
          if (!q.replace(/\s+/g, '')) {
            return;
          }
      $("#i").val("");
      $(".chat").append('<div class="c-item c-user">\n' +
        '        <img src="../../assets/imgs/女生.jpg">\n' +
        '        <span>' + q + '</span>\n' +
        '    </div>');
      ans();
      $(".chat").append('<div class="c-item c-robot">\n' +
        '        <img src="../../assets/imgs/男生.jpg">\n' +
        '        <span>' + randomReply() + '</span>\n' +
        '    </div>')
      downPull();
    }

    //创建函数 - 生成临时随机回复
    function randomReply() {

      let rps = [
        "让我想想...",
        "正在调取数据...",
        "稍等,回复已经在路上了...",
        "这个问题很难,我得思考一下...",
      ];
      return rps[randInt(0, rps.length - 1)];

    }

    //创建函数 - 生成不知道的回复
    function randomReplyUnknown() {

      let rps = [
        "许愿龙正在积极学习中...",
        "这个问题是收费的...",
        "不要难为我嘛..."
      ];
      return rps[randInt(0, rps.length - 1)];

    }


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

    //创建函数 - 聊天记录下拉
    function downPull() {
      $(".chat").scrollTop(9999999999);
    }

    //获取回复
    function ans() {
      $.ajax({
        url: 'https://zhuzuoji.com:8443/baidu_api_AI_robot',
        data: {question: q, appCode: 'e6ca78b5fd9e4d4abfb3001d91394378'},
        type: 'POST',
        dataType: 'json',
        success(data) {
          // console.log("访问成功:");
          let x = data.result.content;
          if (x === "defaultReply") {
            $(".c-robot>span:last").text(randomReplyUnknown());
          } else {
            $(".c-robot>span:last").text(x);
          }
          downPull();
        },
        error(err) {
          // console.log("访问失败了:");
          // console.log(err);

          // 断网: 断网了,我们再也不能沟通了!

          //访问失败后的后续处理
          $(".c-robot>span:last").text("许愿龙生病了,晚点再来吧!");
          downPull();
        }

      })
    }

  }
</script>

js示例：百度智能机器人问答

朱明*

智能机器人

本页面利用Js技术,并使用了百度API的免费接口

2021.07.07

816人

朱明*

天津市宁河县

Hot:15631

朱明*

当前作品暂无评分

还未获得评语哦~