筑坐极_baidu智能聊天机器人

web部分

<div class="chat">

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

    <div class="c-item c-robot">
        <img src="../img/robot.jpg">
        <span>说出你的三个愿望吧!
        </span>
    </div>

    <div class="c-item c-user">
    <img src="../img/user.jpg">
    <span>我</span>
    </div>

</div>


<div class="input">
    <div style="height: 5px;"></div>
    <textarea id="i" placeholder="在这里输入内容, 摁Ctrl+Enter就可以回复了!"></textarea>
</div>


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

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="../img/user.jpg">\n' +
                '        <span>' + q + '</span>\n' +
                '    </div>');
            ans();
            $(".chat").append('<div class="c-item c-robot">\n' +
                '        <img src="../img/robot.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>

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: rgba(255,165,0, 0.85);
        color: white;
        border-radius: 6px;
        display: none;
    }

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


</style>

baidu智能聊天机器人

苏林*

baidu智能聊天机器人

baidu智能聊天机器人

2021.07.06

688人

苏林*

天津市大港区

Hot:14181

苏林*

当前作品暂无评分

还未获得评语哦~