jquery實現(xiàn)聊天機(jī)器人
更新時間:2020年02月08日 10:44:36 作者:哪天才能學(xué)到vue
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)聊天機(jī)器人,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了jquery實現(xiàn)聊天機(jī)器人的具體代碼,供大家參考,具體內(nèi)容如下
<!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">發(fā)送</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); }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
有關(guān)于eclipse配置spket需要注意的一些地方
用eclipse開發(fā)jquery程序,可以安裝spket插件,這樣在寫代碼的時候,就會有智能感知.eclipse配置spket的文章網(wǎng)上到處都是,spket官網(wǎng)上也有介紹.但配置后有的人無論如何也沒有智能感知提示,我就是其中一個.2013-04-04jquery+css3實現(xiàn)熊貓tv導(dǎo)航代碼分享
本篇文章給大家詳細(xì)分享的是jquery+css3來寫出熊貓tv導(dǎo)航的效果,以及代碼分享,喜歡的朋友參考下。2018-02-02探討JQUERY JSON的反序列化類 using問題的解決方法
本篇文章是對JQUERY JSON的反序列化類 using問題的解決方法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jquery實現(xiàn)動態(tài)改變css樣式的方法分析
這篇文章主要介紹了jquery實現(xiàn)動態(tài)改變css樣式的方法,結(jié)合實例形式分析了jQuery動態(tài)操作css樣式的設(shè)置、獲取及應(yīng)用等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05JQuery中使用.each()遍歷元素學(xué)習(xí)筆記
這篇文章主要介紹了jquery中使用.each()遍歷元素學(xué)習(xí)筆記,本文從實際項目經(jīng)驗總結(jié)而來,需要的朋友可以參考下2014-11-11