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

Document

CSS:

* {

padding: 0;

margin: 0;

}

::-webkit-scrollbar {

width: 0px;

}

html, body {

height: 100%;

}

.wrapper {

width: 600px;

margin: 0 auto;

border: 1px solid #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 .content img {

width: 30px;

height: 30px;

border-radius: 50%;

vertical-align: middle;

}

.content .mine img {

float: right;

}

.content .mine .text {

float: right;

background-color: greenyellow;

}

.content .robot img {

float: left;

}

.content .robot .text {

float: left;

background-color: #fff;

}

.text {

max-width: 250px;

font-size: 16px;

padding: 0 10px;

border-radius: 3px;

/* border: 1px solid #fff; */

}

.inp {

width: 100%;

height: 50px;

line-height: 50px;

position: absolute;

bottom: 0px;

font-size: 0;

text-align: center;

/* padding: 0 10px; */

background-color: #ddd;

/* vertical-align: middle; */

}

.inp input {

width: calc(100% - 80px);

height: 30px;

line-height: 30px;

border: none;

outline: none;

font-size: 14px;

display: inline-block;

vertical-align: middle;

}

.inp button {

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(){

var val = $('#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()

}

})

function renderDom(role,text){

$(`

`).appendTo($(`.content`));

var scrollHeight = $('.content')[0].scrollHeight;

var contentHeight = $('.content')[0].offsetHeight;

$('.content').scrollTop(scrollHeight-contentHeight);

}

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