溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了jquery實現聊天機器人的具體代碼，供大家參考，具體內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./demo.css" rel="external nofollow" >
</head>
<body>
<div class="wrapper">
<h5 class="header">俊凱</h5>
<div class="content">
<div class="mine">
<img src="./image/5.jpg" alt="">
<div class="text">
今天天氣怎么樣
</div>
</div>
<div class="robot">
<img src="./image/5.jpg" alt="">
<div class="text">
天氣很好呀適合出門呢~~
</div>
</div>
</div>
<div class="inp">
<input type="text" id="word">
<button id="submit">發送</button>
</div>
</div>
<script src="./jquery.js"></script>
<script src="./demo.js"></script>
<script>
</script>
</body>
</html>
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){
$(`
<div class="${role}">
<img src="./image/${role == 'mine' ? '5.jpg' : '7.jpg'}" alt="">
<div class="text">
${text}
</div>
</div>`).appendTo($(`.content`));
var scrollHeight = $('.content')[0].scrollHeight;
var contentHeight = $('.content')[0].offsetHeight;
$('.content').scrollTop(scrollHeight-contentHeight);
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
