Implementing a simple artificial intelligence chat room based on jQuery

Implementing a simple artificial intelligence chat room based on jQuery_jquery

PHP中文网

Release： 2016-05-16 19:03:27

Original

2073 people have browsed it

This article mainly introduces in detail the relevant information for implementing a simple artificial intelligence chat room based on jQuery. It has a certain reference value. Interested friends can refer to it

It took two hours to toss. When it comes out, the jQuery artificial intelligence chat room looks like this:

Main functions:

1. Of course it’s chat~ Click the airplane button or press Enter to send a message to the panel.
2. Enter specific content, and the system will give you a corresponding reply (here I only set up automatic replies for Hello, How are you and asking for the time).
3. Click the cross to clear all chat history on the panel.
4. When asking for the time, you will be given different responses based on the current time. For example, if it is 22-23 o'clock, the system will reply to you "good night".
5. As the chat progresses, the scroll bar on the right side of the chat panel will remain at the bottom.

HTML:

<p class="chat-box"> 
</p> 
<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>

Copy after login

*Uses Bootstrap3 framework.

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=&#39;you&#39;>You: </span>" + msgVal + "</p><hr class=&#39;you-hr&#39;>"; 
  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&#39;s it going :)","I&#39;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=&#39;ai&#39;>AI: </span>" + replyArr[0] + "</p><hr class=&#39;ai-hr&#39;>"); 
 } 
 else if(msg.indexOf("how are you") != -1 || msg.indexOf("how are u") != -1){ 
  chatBox.append("<p><span id=&#39;ai&#39;>AI: </span>" + replyArr[1] + "</p><hr class=&#39;ai-hr&#39;>"); 
 } 
 else if(msg.indexOf("time") != -1){ 
  chatBox.append("<p><span id=&#39;ai&#39;>AI: </span>Current Time: " + currentTime + ". " + timeGreeting(hour) + "~ :)</p><hr class=&#39;ai-hr&#39;>"); 
 } 
 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(""); 
}

Copy after login

DEMO is here, welcome FORK: AI Chat Box.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope that everyone will support Script House.