js制作一个简易聊天对话框,javascript消息对话框

最新推荐文章于 2024-05-24 20:50:02 发布

小狗AI

最新推荐文章于 2024-05-24 20:50:02 发布

阅读量798

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ai_lover_cat/article/details/134738054

版权

大家好，小编来为大家解答以下问题，js制作一个简易聊天对话框，javascript消息对话框，现在让我们一起来看看吧！

我使用的是黑马程序员的API接口（小思同学），在此鸣谢，我们今天从第一步到最后一步解析机器人的制作，该API接口免费，请大家妥善处置！！

可以实现实时交互文字以及语音聊天功能

一.准备工作

我们需要准备俩个接口和API文档在代码中已经书写

二.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>聊天</title>
    <link rel="stylesheet" href="./css/index.css">
    < src="./js/jquery-1.12.4.min.js"></>
    < src="./js/index.js"></>
</head>
<body>
    <div class="max-box">

    <!-- 顶部信息栏 -->
    <div class="information-box">
        <h2>小思同学</h2>
    </div>

    <!-- 内容栏 -->
    <div class="neirong">
        
        <ul class="left-news">
            <li class="one-li"><img src="./img/694228115d1c56b2c1f24e86a6e005e9.jpeg" alt=""></li>
            <li class="two-li">你好
            </li>
        </ul>

    </div>

    <!-- 顶部消息栏 -->
    <div class="news-box">
        <input type="text" name="" id="">
        <button>S</button>
    </div>

    </div>
    <audio src="" id="voice" autoplay style="display: none;"></audio>
</body>
</html>

三.CSS

*{
    margin: 0;
    padding: 0;
    font-family: '幼圆';
    box-sizing: border-box;
}
img{
    width: 100%;
    height: 100%;
}
ul{
    list-style: none;
}
.max-box{
    position: relative;
    width: 100%;
    height: 100vh;
}
.information-box{
    position: sticky;
    top: 0;
    width: 100%;
    height: 10vh;
    background-color: #333333;
    z-index: 99;
}
.information-box h2{
    color: #fff;
    line-height: 10vh;
    text-align: center;
}
.news-box{
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 10vh;
    background-color: #333333;
    border: 2px double #000;
    padding: 1vh;
}
.news-box input{
    flex: 8;
    outline: none;
    font-size: 30px;
}
.news-box button{
    flex: 2;
    background-color: #75d45d;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

.left-news,
.right-news{
    position: relative;
    display: block;
    width: 100%;
    height: 12vh;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: transparent;
    padding: 1vh;
    margin-bottom: 6vh;
}
.neirong ul:last-of-type{
    margin-bottom: 0;
}
.left-news .one-li,
.right-news .one-li{
    display: inline-block;
    width: 10vh;
    height: 10vh;
    border-radius: 10px;
    overflow: hidden;
}
.left-news .two-li,
.right-news .two-li{
    display: inline-block;
    position: absolute; 
    top: 0; 
    height: 10vh;
    top: 0;
    background-color: #eeeeee;
    border-radius: 10px;
    text-align: center;
    line-height: 10vh;
    font-size: 20px;
    font-weight: bold;
    margin-left: 2vh;
    margin-right: 2vh;
    margin-top: 1vh;
    padding-left: 2vh;
    padding-right: 2vh;
}
.right-news .one-li{
    position: absolute;
    right: 1vh;
}
.right-news .two-li{
    position: absolute;
    right: 12vh;
    background-color: #0f0f0f;
    color: #fff;
}
.neirong{
    padding-bottom: 10vh;
    background-color: #fff;
}

四.JS-jQuery-Ajax

$(function(){
    //封装用户输入函数
    function getnews(){
         //获取用户输入的值
        var text = $("input").val().trim();
        //判断输入值是否为空
        if(text.length <= 0){
            return $("input").val("");
        }else{
            //不为空追加数据
            $(".neirong").append('<ul class="right-news"><li class="two-li">' + text + '</li><li class="one-li"><img src="./img/a074b25dcd61d56154056d231cf20561.jpeg" alt=""></li></ul>');
            $("input").val("");
            getMsg(text);
        }
    }
   

    //绑定点击事件
    $("button").on("click",function(){
        getnews();
    })
    //绑定回车键盘事件
    $(document).on('keyup',function(event){
        if(event.keyCode === 13){
            getnews();
        }
    })

    //获取聊天机器人的消息
    function getMsg(text){    //封装函数
        $.ajax({
            method:'GET',
            url:'http://www.liulongbin.top:3006/api/robot',
            data:{
                spoken:text
            },
            success:function(res){
                // console.log(res);
                if(res.message === 'success'){
                    var msg = res.data.info.text;
                    $(".neirong").append('<ul class="left-news"><li class="one-li"><img src="./img/694228115d1c56b2c1f24e86a6e005e9.jpeg" alt=""></li><li class="two-li">' + msg + '</li></ul>');
                    getVoice(msg);
                }
            }
        })
        //文字转音频
        function getVoice(msg){
            $.ajax({
                method:'GET',
                url:'http://www.liulongbin.top:3006/api/synthesize',
                data:{
                    text:msg
                },
                success:function(res){
                    // console.log(res);
                    if(res.status === 200){
                        $("audio").attr('src',res.voiceUrl);
                    }
                }
            })
        }
    }
})

API接口由黑马提供

学习前端。关注小蜗