基于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。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。