ajax练习——聊天机器人

一、效果演示

二、代码

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%);}

  // 把表单内的内容渲染到页面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出现在可视区*/}

三、感悟

ajax练习——聊天机器人相关推荐

聊天机器人（Ajax实现聊天机器人接口的调用）
文章目录前言一.UI布局二.用户内容渲染到聊天窗口三.获取聊天机器人消息 1.jquery中的ajax 2.调用机器人接口四.将机器人的聊天内容转化为语音播放五.使用回车发送消息总结 - ...
ajax实现聊天机器人（语音助手）完整源码
实现思路:(1)点击发送按钮触发点击事件,进行非空判断,如果输入内容为空或空格,跳出弹窗"输入内容不能为空"(2)设置全局空数组用于存放用户和机器人的语言,为了进行区分,可在数组中 ...
AJAX案例 – 聊天机器人
1 演示案例要完成的效果实现步骤: ① 梳理案例的代码结构 ② 将用户输入的内容渲染到聊天窗口 ③ 发起请求获取聊天消息 ④ 将机器人的聊天内容转为语音 ⑤ 通过 <audio> 播放语 ...
Ajax — 聊天机器人演示
<body><div class="wrap"><div class="header& ...
使用 ChatterBot 库制作一个聊天机器人
作者 | 周萝卜来源 | 萝卜大杂烩我们学习一些如何使用 ChatterBot 库在 Python 中创建聊天机器人,该库实现了各种机器学习算法来生成响应对话,还是挺不错的 1什么是聊天机器人聊 ...
jq php 获取机器码,jquery实现聊天机器人
本文实例为大家分享了jquery实现聊天机器人的具体代码,供大家参考,具体内容如下 Document 俊凯今天天气怎么样天气很好呀适合出门呢~~ 发送 CSS: * { padding: 0; m ...
Python 数据科学入门教程：TensorFlow 聊天机器人
TensorFlow 聊天机器人原文:Creating a Chatbot with Deep Learning, Python, and TensorFlow 译者:飞龙协议:CC BY-NC- ...
django建立个人网站（5图文识别以及聊天机器人）
以前爬虫做验证码识别时用到了tesserocr这个库.经过调试后准确率在60%左右.但网站也不是傻子,弹过几次后.验证码变成中文了.这就不得不用别的方法.最后决定用百度的图文识别的API接口.在百度官 ...
用图灵机器人2.0实现聊天机器人
聊天机器人是我最近写的一个项目,本来以为这个项目的难点是请求ajax,但是真正实现起来,发现,聊天机器人这样的一个小demo对前端的基础的要求还是挺大的,下面我将从AJAX.HTML.CSS.JS四个 ...

ajax练习——聊天机器人

一、效果演示

二、代码

三、感悟

ajax练习——聊天机器人相关推荐

最新文章

热门文章