基于jQuery实现简单人工智能聊天室
花了俩小时折腾出来的,jQuery人工智能聊天室长这样:
主要功能:
1.当然是聊天啦~点击飞机按钮或者回车可以发送消息到面板。
2.输入特定的内容,系统会给你相应的回复(这里我只设置了Hello,Howareyou和询问时间的自动回复)。
3.点击叉叉可以清除面板上的所有聊天记录。
4.问时间的时候,根据现在的时间,会给你相应的不同的回复,比如现在是22-23点,系统会回复你“goodnight”。
5.随着聊天的进行,聊天面板右侧的滚动条会一直维持在最底部。
HTML:
<divclass="chat-box"> </div> <formclass="form-inlinechat-form"> <inputtype="text"class="form-controlchat-message"placeholder="SaySomething"> <buttontype="button"class="btnbtn-primarychat-send"title="SendMessage"> <iclass="fafa-paper-plane"aria-hidden="true"> </i> </button> <buttontype="reset"class="btnbtn-successchat-reset"title="ResetMessage"> <iclass="fafa-refresh"aria-hidden="true"> </i> </button> <buttontype="button"class="btnbtn-dangerchat-clear"title="CleartheChatBox"> <iclass="fafa-times"aria-hidden="true"> </i> </button> </form> <hr> <footer> DesignedBy <ahref="http://blog.csdn.net/alenhhy"rel="externalnofollow"target="_blank"> AlenHu </a> </footer>
*使用了Bootstrap3框架。
JQuery:
$(document).ready(function(){ //sendthemessagebyclick $(".chat-send").click(sendMsg); //pressentertosend $("form").keypress(function(event){ if(event.keyCode===13){ event.preventDefault(); sendMsg(); } }); //clearthechatbox $(".chat-clear").click(clearChatBox); }); //sendmessagetochatbox functionsendMsg(){ varmsg=$(".chat-message"); varmsgVal=msg.val(); varchatBox=$(".chat-box"); if(msgVal){ varmsgAppend="<p><spanid='you'>You:</span>"+msgVal+"</p><hrclass='you-hr'>"; chatBox.append(msgAppend); }else{} //dialogreply dialog(msgVal); //emptyinput msg.val(""); //keepthescrollinbottom chatBox.scrollTop(chatBox[0].scrollHeight); } //setuptheAIdialog functiondialog(msg){ varreplyArr=["Hi,how'sitgoing:)","I'mgood,thx,U?:)"]; msg=msg.toLowerCase(); vartime=newDate(); varhour=time.getHours(); varminute=time.getMinutes(); varcurrentTime=plusZero(hour)+":"+plusZero(minute); varchatBox=$(".chat-box"); if(msg.indexOf("hello")!=-1){ chatBox.append("<p><spanid='ai'>AI:</span>"+replyArr[0]+"</p><hrclass='ai-hr'>"); } elseif(msg.indexOf("howareyou")!=-1||msg.indexOf("howareu")!=-1){ chatBox.append("<p><spanid='ai'>AI:</span>"+replyArr[1]+"</p><hrclass='ai-hr'>"); } elseif(msg.indexOf("time")!=-1){ chatBox.append("<p><spanid='ai'>AI:</span>CurrentTime:"+currentTime+"."+timeGreeting(hour)+"~:)</p><hrclass='ai-hr'>"); } else{} } //add0iftimenumberis<10 functionplusZero(x){ if(x<10){ x="0"+x; } else{ x=x; } returnx; } //greetingbyhour functiontimeGreeting(h){ vargreeting=["Uneedtosleep","Goodmorning","Lunchtimenow","Feelasleep?Havesomecoffee","Freetime~Yeah","Goodnight"]; if(h>=0&&h<=6){ returngreeting[0]; } elseif(h>=7&&h<=10){ returngreeting[1]; } elseif(h>=11&&h<=13){ returngreeting[2]; } elseif(h>=14&&h<=18){ returngreeting[3]; } elseif(h>=19&&h<=21){ returngreeting[4]; } elseif(h>=22&&h<=23){ returngreeting[5]; } else{ return""; } } //clearthechatbox functionclearChatBox(){ $(".chat-box").html(""); }
DEMO在这儿,欢迎FORK:AIChatBox。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。