本文实例为大家分享了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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
标题名称:jquery实现聊天机器人
链接分享:https://www.cdcxhl.com/article28/ghpocp.html
成都网站建设公司_创新互联,为您提供App设计、全网营销推广、电子商务、品牌网站制作、网站设计、软件开发
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联