筑坐极_自动问答页面小案例

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

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

代码部分:

html:

<body>
<div class="chat">
        <div style="height: 10px;"></div>
        <div class="item robot">
            <div class="AIPic"></div>
            <p class="naviQuest">性感堡垒,在线解惑</p>
        </div>
        
</div>
</div>
<div class="input">
    <textarea id="in" placeholder="输入您想知道的:(按下Crtl+回车键输入)"></textarea>
</div>
<button class="ok">发送</button>
</body>

css:

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
        background: black;
    }
    html,body{
        height: 100%;
    }
    .chat{
        width: 100%;
        height: 80%;
        overflow-y: scroll;
    }
    .input{
        height: 20%;

    }
    .item{
        width: 100%;
        float: left;
        margin-bottom: 10px;
    }
    .AIPic{
        float: left;
        width: 59px;
        height: 59px;
        border: 1px solid skyblue;
        border-radius: 50%;
        background-image: url("../../Js/imgs/AI.jpg");
    }
    .naviQuest{
        max-width: 50%;
        display: block;
        background: rgba(200,120,80,0.5);
        color: red;
        padding: 15px;
        border-radius: 10px;
        margin-left: 5px;
        font-size: 18px;
        float: left;
    }
    .userPic{
        float: right;
        width: 59px;
        height: 59px;
        border: 1px solid skyblue;
        border-radius: 50%;
        background-image: url("../../Js/imgs/user.jpg");
    }
    .QuestWord{
        float: right;
        max-width: 50%;
        display: block;
        background: rgba(120,100,200,0.6);
        color: darkred;
        padding: 15px;
        border-radius: 10px;
        margin-right: 5px;
        font-size: 18px;
    }
    #in{
        width: 75%;
        height: 75%;
        resize: none;
        color: firebrick;
        border: 1px solid white;
        padding: 5px;
        display: block;
        margin: 0 auto;
        border-radius: 6px;
        font-size: 18px;
    }
    .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: blue;
    }
    .chat::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: deepskyblue;
    }
    .ok{
        position: fixed;
        width: 60px;
        height: 40px;
        border: 1px solid yellow;
        bottom: 20%;
        right: 12%;
        color: white;
        border-radius: 10px;
        display: none;
    }
    @media screen and (max-width: 576px) {
        .ok {
            display: block;
        }
    }
</style>

Js:

<script type="text/javascript">
    let txt = "";
    //生成随机数
    function randInt(minRange, maxRange) {
        return parseInt(Math.random() * (maxRange - minRange + 1)) + minRange;
    }
    //生成随机回复1
    function randReply() {
        let reply1 = [
            "堡垒在想了.",
            "堡垒查的略慢.",
            "堡垒打字略慢."
        ]
        let r1 = reply1[randInt(0,reply1.length-1)];
        return r1;
    }
    //生成随机回复2
    function randReplyUn() {
        let reply2 = [
            "堡垒不理解这个问题.",
            "堡垒累了,要睡觉了.",
            "堡垒什么都没看见.",
        ]
        let r2 = reply2[randInt(0,reply2.length-1)];
        return r2;
    }
    //获取回复
    function getReply() {
        let url = "https://zhuzuoji.com:8443/baidu_api_AI_robot";
        let data = {question:txt,appCode:"07f9d994d88d45df99e90b0a1412c147"}
        $.ajax({
            url:url,
            type:"POST",
            data:data,
            dataType:"JSON",
            success:function(data){
                let answer = data.result.content;
                if (answer=== "defaultReply"){
                    $(".naviQuest:last").text(randReplyUn());
                }else{
                    $(".naviQuest:last").text(answer);
                }
                pullDown();

            },
            error(err) {
                //连接端口失败,根据status返回的错误类型,显示不同的错误信息
                switch (err.status) {
                    //端口路径出现问题
                    case 404:
                        let newRobotRespone404 = '<div class="item robot"><div class="AIPic"></div><p class="naviQuest">堡垒觉得你地址写错了,查去吧</p></div>';
                        $(".chat").append(newRobotRespone404);
                        break;
                    //服务器出现问题
                    case 500:
                        let newRobotRespone500 = '<div class="item robot"><div class="AIPic"></div><p class="naviQuest">堡垒觉得服务器有问题了</p></div>';
                        $(".chat").append(newRobotRespone500);
                        break;
                    //用户网络出现问题
                    case 0:
                        let newRobotRespone0 = '<div class="item robot"><div class="AIPic"></div><p class="naviQuest">堡垒觉得你没网,自己查查去吧</p></div>';
                        $(".chat").append(newRobotRespone0);
                        break;
                    //未知错误
                    default:
                        let newRobotResponeX = '<div class="item robot"><div class="AIPic"></div><p class="naviQuest">应该没你什么事,但是堡垒也不知道</p></div>';
                        $(".chat").append(newRobotResponeX);
                        break;
                }
                pullDown();
            }
        })
    }
    //下拉对话框
    function pullDown() {
        $(".chat").scrollTop(99999999999999);
    }
    //渲染对话
    function renderChat() {
        txt = $("#in").val();
        if(!txt.replace(/\s+/g,"")){
            $("#in").val("");
            return;
        }
        let newUser = '<div class="item user"><div class="userPic"></div><p class="QuestWord">'+txt+'</p></div>';
        $(".chat").append(newUser);
        let newRobotRespone = '<div class="item robot"><div class="AIPic"></div><p class="naviQuest">'+randReply()+'</p></div>';
        $(".chat").append(newRobotRespone);
        $(".naviQuest").text(getReply());
        $("#in").val("");
    }

    window.onload = function () {
        $("#in").keyup(function (event) {
            if (event.ctrlKey && event.which === 13){
                renderChat();
            }
        });
        $(".ok").click(function () {
            renderChat();
        });
    }
</script>

gif展示:

自动问答页面小案例

自动问答页面小案例

梁松*

Js

利用Js技术制作自动问答页面

2021.07.06

976人

梁松*

天津市河东区

Hot:12022

梁松*

当前作品暂无评分

还未获得评语哦~