jquery实现聊天机器人
更新时间:2020年02月08日 10:44:36 作者:哪天才能学到vue
这篇文章主要为大家详细介绍了jquery实现聊天机器人,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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"> <h4 class="header">俊凯</h4> <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); }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
Juery解决tablesorter中文排序和字符范围的方法
这篇文章主要介绍了Juery解决tablesorter中文排序和字符范围的方法,实例分析了jQuery针对tablesorter中文排序和字符范围的解决方法,需要的朋友可以参考下2015-05-05
最新评论