聊天机器人

最新推荐文章于 2023-11-17 17:32:25 发布

xwhking

最新推荐文章于 2023-11-17 17:32:25 发布

阅读量221

点赞数

文章标签：机器人 css css3 javascript

本文链接：https://blog.csdn.net/Go_ahead_forever/article/details/126606496

版权

聊天机器人

机器人来源：思知
介绍：一个可以和自己聊天的机器人

主要技术：

·html,构建页面框架

·css美化页面

·js动态添加内容

·Ajax获取远程机器人的回复

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Robot</title>
    <script src="js/jQuery.js"></script>
    <script src="js/index.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="chatContainer">
        <div class="robotName">
            小小
        </div>
        <div class="chatMessage">
            <ul>
                <li class="chatContentR">
                    <span></span>
                    <p>你好呀，我是小小！</p>
                </li>
                
            </ul>
        </div>
        <div class="sendMessage">
            <input type="text" id="request" placeholder="快来和我说话吧">
            <button id="btn">发送</button>
        </div>
    </div>
</body>
</html>

index.css

*{
    margin:0;
    padding:0;
}
body {
    background-image: url(../images/robotbg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment: fixed;
}
.chatContainer {
    max-width: 800px;
    /* width: 60%; */
    min-width: 400px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    overflow: hidden;
}
.robotName{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgba(255, 255, 255, 0.5);
    padding-left: 20px;
    box-sizing: border-box;
}
.chatMessage {
    width: 100%;
    height: 600px;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: auto;
}
.chatMessage>ul {
    width: 100%;
    list-style: none;
}
.chatMessage>ul>li{
    width: 100%;
    /* background-color: pink; */
    position:relative;
    min-height:40px;
}
.chatContentR {
    display:flex;
    justify-content: flex-start;
    margin:10px 0;
}
.chatContentL {
    display: flex;
    justify-content: flex-end;
    margin:10px 0;
}
.chatContentR>span {
    display:inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url(../images/robot.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin:0 5px;
}
.chatContentL>span {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: url(../images/userImages/user.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 5px;
}
.chatContentR>p {
    max-width: 50%;
    word-wrap: break-word;
    padding:10px;
    margin-left:5px;
    background-color: orange;
    border-radius:10px;
    position:relative;
}
.chatContentL>p {
    max-width: 50%;
    word-wrap: break-word;
    padding: 10px;
    margin-right: 5px;
    background-color: orange;
    border-radius: 10px;
    position:relative;
}
.chatContentR>p::before {
    content: "";
    position:absolute;
    width: 10px;
    height: 10px;
    margin:10px 0;
    top:10px;
    left:-5px;
    transform:rotate(45deg) ;
    background-color: orange;
    /* z-index:-1; */
}
.chatContentL>p::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 10px;
    right: -5px;
    transform: rotate(45deg);
    background-color: orange;
    /* z-index:-1; */
}
.sendMessage {
    width: 100%;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.5);
    display:flex;
    justify-content:space-around;
    align-items:center;
}
.sendMessage>input {
    width: 75%;
    height: 40px;
    line-height: 40px;
    padding-left:10px;
    outline:none;
    border-radius:10px;
    font-size:18px;
    box-sizing: border-box;
    border:none;
}
.sendMessage>button{
    width: 15%;
    height: 40px;
    border-radius:15px;
    border:none;
    cursor:pointer;
}

index.js

说明：需要添加jQuery.js

$(function () {
    //得到机器人回复的消息;
    function getResponse(text) {
        // var response = '';
        $.ajax({
            //把Ajax的异步执行改为同步执行但这样子用会导致有延迟发送很慢，得到回复也慢，所以直接在回调函数中渲染，不用返回值了
            // async:false,此为Ajax的异步执行改为同步执行
            type: "GET",
            url: "https://api.ownthink.com/bot",
            data: {
                spoken: text,
                appid: '332b13ccc9c80b419a00008e2122eeb3',
            },
            success: function (res) {
                console.log(res);
                // 这里不能直接给response赋值因为Ajax是异步执行response等不到请求给值，可以把Ajax改为同步
                // response = res.data.info.text;
                appendR(res.data.info.text)
            }
        })
    }
    //给输入框绑定回车的键盘事件传出请求
    $('#request').on('keydown', function (e) {
        if (e.keyCode === 13) {
            console.log(11);
            if ($(this).val() === '')
            {
                alert("消息为空，请重新输入");
            }
            else {
                var request = $(this).val();
                appendL($(this).val());
                $(this).val('');
                getResponse(request);
                
            }
        }
    })
    $('#btn').on('click', function (e) {
        if ($('#request').val() === '') {
            alert("消息为空，请重新输入");
        }
        else {
            var request = $('#request').val();
            appendL($('#request').val());
            $('#request').val('');
            getResponse(request);
        }
    })
    function appendR(text) {
        var li = $('<li class="chatContentR"><span></span><p>' + text + '</p></li > ');
        $(".chatMessage>ul").append(li);
        $('.chatMessage').scrollTop($('.chatMessage')[0].scrollHeight - 600);
    }

    function appendL(text) {
        var li = $('<li class="chatContentL"><p>' + text + '</p><span></span></li > ');
        $(".chatMessage>ul").append(li);
        $('.chatMessage').scrollTop($('.chatMessage')[0].scrollHeight - 600);
    }
    
})