基于jQuery实现简单人工智能聊天室

花了俩小时折腾出来的，jquery人工智能聊天室长这样：

主要功能：

1.当然是聊天啦~点击飞机按钮或者回车可以发送消息到面板。
2.输入特定的内容，系统会给你相应的回复（这里我只设置了hello，how are you和询问时间的自动回复）。
3.点击叉叉可以清除面板上的所有聊天记录。
4.问时间的时候，根据现在的时间，会给你相应的不同的回复，比如现在是22-23点，系统会回复你“good night”。
5.随着聊天的进行，聊天面板右侧的滚动条会一直维持在最底部。

html：

<div class="chat-box"> 
</div> 
<form class="form-inline chat-form"> 
 <input type="text" class="form-control chat-message" placeholder="say something"> 
 <button type="button" class="btn btn-primary chat-send" title="send message"> 
 <i class="fa fa-paper-plane" aria-hidden="true"> 
 </i> 
 </button> 
 <button type="reset" class="btn btn-success chat-reset" title="reset message"> 
 <i class="fa fa-refresh" aria-hidden="true"> 
 </i> 
 </button> 
 <button type="button" class="btn btn-danger chat-clear" title="clear the chat box"> 
 <i class="fa fa-times" aria-hidden="true"> 
 </i> 
 </button> 
</form> 
<hr> 
<footer> 
 designed by 
 <a href="http://blog.csdn.net/alenhhy" rel="external nofollow" target="_blank"> 
 alen hu 
 </a> 
</footer> 

 *使用了bootstrap3框架。

jquery:

$(document).ready(function() { 
 
 //send the message by click 
 $(".chat-send").click(sendmsg); 
 
 //press enter to send 
 $("form").keypress(function(event) { 
  if (event.keycode === 13) { 
   event.preventdefault(); 
   sendmsg(); 
  } 
 }); 
 
 //clear the chat box 
 $(".chat-clear").click(clearchatbox); 
}); 
 
//send message to chat box 
function sendmsg() { 
 var msg = $(".chat-message"); 
 var msgval = msg.val(); 
 var chatbox = $(".chat-box"); 
 if (msgval) { 
  var msgappend = "<p><span id='you'>you: </span>" + msgval + "</p><hr class='you-hr'>"; 
  chatbox.append(msgappend); 
 } else {} 
 
 //dialog reply 
 dialog(msgval); 
 
 //empty input 
 msg.val(""); 
 
 //keep the scroll in bottom 
 chatbox.scrolltop(chatbox[0].scrollheight); 
} 
 
//set up the ai dialog 
function dialog(msg){ 
 var replyarr = ["hi, how's it going :)","i'm good, thx, u? :)"]; 
 msg = msg.tolowercase(); 
 var time = new date(); 
 var hour = time.gethours(); 
 var minute = time.getminutes(); 
 var currenttime = pluszero(hour) + ":" + pluszero(minute); 
 
 var chatbox = $(".chat-box"); 
 
 if(msg.indexof("hello") != -1){ 
  chatbox.append("<p><span id='ai'>ai: </span>" + replyarr[0] + "</p><hr class='ai-hr'>"); 
 } 
 else if(msg.indexof("how are you") != -1 || msg.indexof("how are u") != -1){ 
  chatbox.append("<p><span id='ai'>ai: </span>" + replyarr[1] + "</p><hr class='ai-hr'>"); 
 } 
 else if(msg.indexof("time") != -1){ 
  chatbox.append("<p><span id='ai'>ai: </span>current time: " + currenttime + ". " + timegreeting(hour) + "~ :)</p><hr class='ai-hr'>"); 
 } 
 else {} 
} 
 
//add 0 if time number is <10 
function pluszero(x){ 
 if(x < 10){ 
  x = "0" + x; 
 } 
 else { 
  x = x; 
 } 
 return x; 
} 
 
//greeting by hour 
function timegreeting(h){ 
 var greeting = ["u need to sleep","good morning","lunch time now","feel asleep? have some coffee","free time~yeah","good night"]; 
 
 if(h>=0&&h<=6){ 
  return greeting[0]; 
 } 
 else if(h>=7&&h<=10){ 
  return greeting[1]; 
 } 
 else if(h>=11&&h<=13){ 
  return greeting[2]; 
 } 
 else if(h>=14&&h<=18){ 
  return greeting[3]; 
 } 
 else if(h>=19&&h<=21){ 
  return greeting[4]; 
 } 
 else if(h>=22&&h<=23){ 
  return greeting[5]; 
 } 
 else { 
  return ""; 
 } 
} 
 
//clear the chat box 
function clearchatbox() { 
 $(".chat-box").html(""); 
} 

demo在这儿，欢迎fork：ai chat box。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。