本文实例为大家分享了jquery实现聊天机器人的具体代码,供大家参考,具体内容如下
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title> Document
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/demo.css " rel=巴獠縩ofollow”比;
& lt;/head>
& lt; body>
& lt; div类=鞍捌鳌北?
& lt; h5类="头"祝辞俊凯& lt;/h5>
& lt; div类=澳谌荨北?
& lt; div类=拔摇北?
& lt; img src=" https://www.yisu.com/zixun/image/5.jpg " alt="比;
& lt; div类=拔谋尽北?
今天天气怎么样
& lt;/div>
& lt;/div>
& lt; div类=盎魅恕北?
& lt; img src=" https://www.yisu.com/zixun/image/5.jpg " alt="比;
& lt; div类=拔谋尽北?
天气很好呀适合出门呢~ ~
& lt;/div>
& lt;/div>
& lt;/div>
& lt; div类="输入"比;
& lt;输入类型="文本" id=暗ゴ省北?
& lt;按钮id=疤峤弧痹诜⑺? lt;/button>
& lt;/div>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/zixun/jquery.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/demo.js "祝辞& lt;/script>
& lt; script>
& lt;/script>
& lt;/body>
& lt;/html>
CSS:
* {
填充:0;
保证金:0;
}
:: -webkit-scrollbar {
宽度:0 px;
}
html,身体{
高度:100%;
}
.wrapper {
宽度:600 px;
保证金:0汽车;
边界:1 px固体# eee;
高度:100%;
位置:相对;
background - color: # eee;/*溢出:隐藏;*/}
.wrapper .content {/* overflow-x:隐藏;
overflow-y:滚动;*/溢出:汽车;
高度:钙(100% - 110 px);
行高:30 px;
填充:10 px;
}
.wrapper .header {
背景颜色:灰色;
text-align:中心;
颜色:# fff;
高度:40像素;
行高:40像素;
粗细:700;
}
.wrapper .content .mine {
浮:正确;
宽度:400 px;
}
.wrapper .content .robot {
浮:左;
宽度:400 px;
}
.wrapper .content img {
宽度:30 px;
高度:30 px;
这个特性:50%;
vertical-align:中间;
}
.content .mine img {
浮:正确;
}
.content .mine。text {
浮:正确;
background - color: greenyellow;
}
.content .robot img {
浮:左;
}
.content .robot。text {
浮:左;
background - color: # fff;
}
。text {
max-width: 250 px;
字体大小:16 px;
填充:0 10 px;
border - radius: 3 px;/*边境:1 px固体# fff;*/}
.inp {
宽度:100%;
高度:50 px;
行高:50 px;
位置:绝对的;
底部:0 px;
字体大小:0;
text-align:中心;/*填充:0 10 px;*/background - color: # ddd;/* vertical-align:中间;*/}
.inp输入{
宽度:钙(100% - 80 px);
高度:30 px;
行高:30 px;
边界:没有;
大纲:没有;
字体大小:14 px;
显示:inline-block;
vertical-align:中间;
}
.inp按钮{
宽度:60 px;
高度:30 px;
字体大小:14 px;
边界:没有;
大纲:没有;
background - color: # ccc;
显示:inline-block;
vertical-align:中间;
光标:指针;
}
js:
$(" #提交”).click(函数(){
var val=$ (' #‘) .val ();
如果(val) {
renderDom(“我”,val)
$ (" #‘).val (”)
. ajax({美元
类型:“得到”,
url:“http://temp.duyiedu.com/api/chat”,
数据:{
文字:瓦尔
}，
数据类型:json,
成功:函数(res) {//console.log (res)
renderDom(“机器人”,res.text);
}
})
}
})
$(" #字”)。(“弹起”,函数(e) {
如果(e。键码==13){
$(" #提交”).click ()
}
})
函数renderDom(角色、文本){
$ ('
& lt; div类=" ${作用}”比;
& lt; img src=" https://www.yisu.com/zixun/image/${角色==摇? # 63;“5. jpg”:“7. jpg”}“alt=" "比;
& lt; div类=拔谋尽北?
${文本}
& lt;/div>
& lt;/div>”) .appendTo ($ (' .content '));
var scrollHeight=$ (' .content ') [0] .scrollHeight;
var contentHeight=$ (' .content ') [0] .offsetHeight;
$ (' .content ') .scrollTop (scrollHeight-contentHeight);
}
