一、效果演示
二、代码
html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../../../HTML+CSS/base.css"><!--页面初始化-->
<link rel="stylesheet" href="main.css"><!--样式-->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="warp">
<!--顶栏-->
<header>
<h3>胖虎</h3>
<img src="http://photogz.photo.store.qq.com/psc?/V10rvOd644y8gv/9vuGDcz9AP*EJeMjs9i.nqVCq1wc6sjnq8E3TEF0adKeAoX6wGVl.g6sE.fnURY.fh9k48epYt4lgY1TMH.tiEd3noArr4q8elUsHqe2VR8!/b&bo=vAK8ArwCvAIRGS4!&rf=viewer_4" alt="">
</header>
<!--中间部分-->
<div class="main">
<ul class="talk_list">
<li class="left_word">
<img src="http://photogz.photo.store.qq.com/psc?/V10rvOd644y8gv/9vuGDcz9AP*EJeMjs9i.nqVCq1wc6sjnq8E3TEF0adKeAoX6wGVl.g6sE.fnURY.fh9k48epYt4lgY1TMH.tiEd3noArr4q8elUsHqe2VR8!/b&bo=vAK8ArwCvAIRGS4!&rf=viewer_4" alt="">
<span>嗨，最近想我没有？</span>
</li>
</ul>
<div class="drag_bar"></div>
</div>
<!--底部-->
<footer>
<img src="https://photogz.photo.store.qq.com/psc?/V10rvOd60lRH5G/xZikVHqhLrt9jsfqm9tF*Y29SMyKgGmERaw*3PP.7PCbHN7eykGGj3rCahQLWp.wXnr6NXu4dt5KrXg8744o8w!!/mnull&bo=*wH*Af8B*wERCT4!&rf=photolist&t=5" alt="">
<input type="text" placeholder="说点什么吧..." id="ipt">
<button id="btnSend">发送</button>
</footer>
</div>
<!--语音播放-->
<audio src="" autoplay="autoplay"></audio>
<script src="index.js"></script>
</body>
</html>css
.warp{
position: fixed;
top: 20px;
bottom: 20px;
transform: translateX(-50%);
left: 50%;
width: 450px;
box-shadow: #0000003b 0 0 9px 1px;
border-radius: 10px;
overflow: hidden
}
header{
display: flex;
justify-content: space-between;
height: 55px;
background-image: linear-gradient(to right, #f98a83 , #b388f6);
}
h3{
line-height: 55px;
margin-left: 25px;
color: white;
font-size: 18px;
}
img{
width: 40px;
height: 40px;
border-radius: 50%;
}
header img{
margin-top: 8px;
margin-right: 25px;
}
.main{
width: 100%;
background-color: #f4f3f3;
position: absolute;
overflow: auto;
padding:0 20px 0;
bottom: 55px;
top: 55px;
}
.talk_list li{
display: flex;
margin: 20px 0 30px;
}
.talk_list span::before{
top: -3px;
position: absolute;
}
.left_word span::before{
left: -11px;
content: url("E:/前端学习/教学素材/黑马ajax/day1/code/聊天机器人/img/corner01.png");
}
.talk_list span{
position: relative;
display: inline-block;
line-height: 22px;
padding: 12px 15px 12px;
font-size: 16px;
border-radius: 10px;
max-width: 290px;
word-wrap:break-word;/*强制换行*/
}
.left_word span {
color: white;
background-color: #fe9697;
margin-left: 13px;
}
footer{
height: 55px;
}
.right_word{
display: flex;
flex-direction: row-reverse;
}
.right_word span{
background-color: #fff;
margin-right: 15px;
}
.right_word span::before{
right: -11px;
content: url("E:/前端学习/教学素材/黑马ajax/day1/code/聊天机器人/img/corner02.png");
}
footer{
background-color: #fff;
padding: 0 15px;
align-items: center;
width: 100%;
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
height: 55px;
}
footer input,
footer button{
height: 37px;
border: 0;
border-radius: 5px;
}
footer input{
padding: 8px;
flex:1;
margin: 0 15px 0;
background-color:#f4f3f3;
font-size: 14px;
color: #949494;
}
footer button{
font-size: 14px;
color: white;
width: 60px;
background-color: #fe9697;
}
/*定义默认的滚动条样式*/
/* 定义滚动条样式 */
::-webkit-scrollbar {
position: absolute;
width: 7px;
height: 6px;
background-color: rgba(240, 240, 240, 1);
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: white;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
box-shadow: inset 0 0 0px rgba(28, 15, 15, 0.5);
background-color: rgb(16 9 9 / 20%);
}js
// 把表单内的内容渲染到页面
let btnSend = document.querySelector('#btnSend'),
ipt = document.querySelector('#ipt'),
talk_list = document.querySelector('.talk_list'),
audio = document.querySelector('audio')
btnSend.addEventListener('click', function() {/*点击发送事件*/
if (ipt.value.trim().length !== 0) {/*文字框有内容*/
// 把标签拼上表单内容，插入到结构中
let spendHtml= `<li class="right_word"><img src="https://photogz.photo.store.qq.com/psc?/V10rvOd60lRH5G/xZikVHqhLrt9jsfqm9tF*Y29SMyKgGmERaw*3PP.7PCbHN7eykGGj3rCahQLW.wXnr6NXu4dt5KrXg8744o8w!!/mnull&bo=*wH*Af8B*wERCT4!&rf=photolist&t=5" alt=""><span>${ipt.value.trim()}</span></li>`;
talk_list.insertAdjacentHTML('beforeend', spendHtml);/*实现同时创建与插入*/
getReply()
scrollToBottom();/*出现新li就让他滚出来*/
ipt.value ='';
}
});
document.addEventListener('keyup',function(e) {
if(e.key==='Enter'){/*按下回车*/
btnSend.click(); /*触发发送键的点击*/
}
})
// 获取回复信息
function getReply() {
$.ajax({
type:'GET',
url:'http://www.liulongbin.top:3006/api/robot',
data:{
spoken:ipt.value.trim()
},
success:function(res){
let reply = res.data.info.text;/*得到回复的信息*/
let replyHtml = ` <li class="left_word"><img src="http://photogz.photo.store.qq.com/psc?/V10rvOd644y8gv/9vuGDcz9AP*EJeMjs9i.nqVCq1wc6sjnq8E3TEF0adKeAoX6wGVl.g6sE.fnURY.fh9k48epYt4lgY1TMH.tiEd3noArr4q8elUsHqe2VR8!/b&bo=vAK8ArwCvAIRGS4!&rf=viewer_4" alt=""><span>${res.data.info.text}</span></li>`;/*回复信息拼接结构*/
talk_list.insertAdjacentHTML('beforeend',replyHtml) /*插入到聊天页面*/
getVoice(reply);/*把文本传输进获取语音函数*/
scrollToBottom();/*出现新li就让他滚出来*/
}
})
}
//获取回复信息的语音链接，并使用audio播放
function getVoice(text) {
$.ajax({
type:'GET',
url:'http://www.liulongbin.top:3006/api/synthesize',
data:{
text:text/*参数就是机器人的回复*/
},
success:function(res){
audio.src=res.voiceUrl;/*获得语音链接*/
audio.play();/*播放语音*/
}
})
}
// 让滚动条始终滚动到最底部
function scrollToBottom() {
let newMsg = document.querySelector('.talk_list').lastElementChild;/*最新的一个li*/
newMsg.scrollIntoView();/*让最新的li出现在可视区*/
}三、感悟
