微客导航 » 文章资讯 » jquery实现聊天机器人

jquery实现聊天机器人

2023-08-01 22:51:03 144

本文实例为大家分享了jquery实现聊天机器人的具体代码，供大家参考，具体内容如下







Document





俊凯




今天天气怎么样

天气很好呀适合出门呢~~

发送

CSS:

*{
padding:0;
margin:0;
}

::-webkit-scrollbar{
width:0px;
}
html,body{
height:100%;
}
.wrapper{
width:600px;
margin:0auto;
border:1pxsolid#eee;
height:100%;
position:relative;
background-color:#eee;
/*overflow:hidden;*/
}
.wrapper.content{
/*overflow-x:hidden;
overflow-y:scroll;*/
overflow:auto;
height:calc(100%-110px);
line-height:30px;
padding:10px;
}
.wrapper.header{
background-color:grey;
text-align:center;
color:#fff;
height:40px;
line-height:40px;
font-weight:700;
}

.wrapper.content.mine{
float:right;
width:400px;
}
.wrapper.content.robot{
float:left;
width:400px;
}
.wrapper.contentimg{
width:30px;
height:30px;
border-radius:50%;
vertical-align:middle;
}
.content.mineimg{
float:right;
}
.content.mine.text{
float:right;
background-color:greenyellow;
}
.content.robotimg{
float:left;
}
.content.robot.text{
float:left;
background-color:#fff;
}
.text{
max-width:250px;
font-size:16px;
padding:010px;
border-radius:3px;
/*border:1pxsolid#fff;*/
}
.inp{
width:100%;
height:50px;
line-height:50px;
position:absolute;
bottom:0px;
font-size:0;
text-align:center;
/*padding:010px;*/
background-color:#ddd;
/*vertical-align:middle;*/
}

.inpinput{
width:calc(100%-80px);
height:30px;
line-height:30px;
border:none;
outline:none;
font-size:14px;
display:inline-block;
vertical-align:middle;
}
.inpbutton{
width:60px;
height:30px;
font-size:14px;
border:none;
outline:none;
background-color:#ccc;
display:inline-block;
vertical-align:middle;
cursor:pointer;
}

js：

$('#submit').click(function(){
varval=$('#word').val();
if(val){
renderDom('mine',val)
$('#word').val('')
$.ajax({
type:'GET',
url:'http://temp.duyiedu.com/api/chat',
data:{
text:val
},
dataType:'json',
success:function(res){
//console.log(res)
renderDom('robot',res.text);
}
})
}
})
$('#word').on('keyup',function(e){
if(e.keyCode==13){
$('#submit').click()
}
})
functionrenderDom(role,text){
$(`



${text}

`).appendTo($(`.content`));
varscrollHeight=$('.content')[0].scrollHeight;
varcontentHeight=$('.content')[0].offsetHeight;
$('.content').scrollTop(scrollHeight-contentHeight);


}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jquery实现聊天机器人

热门推荐

随机推荐