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

<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>

$(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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9803">
                            <img src="https://img.php.cn/upload/webcode/000/000/019/175998960818035.jpg" alt="微尔企业网站管理系统1.75 build build 090709">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9803">微尔企业网站管理系统1.75 build build 090709</a>
                            <p>系统功能介绍 1 包含企业网站所必备的功能：企业信息、产品管理、人才招聘、新闻资讯、企业图片、以及视频下载等模块2 由于是从CMS系统的基础上开发而成，因此相对于一些其他的企业网站管理系统，本系统具备更强的可扩展能力，可以胜任从小型工作室到大中型企业网上门户等各种不同规模网站的需求。3 后台管理与模板完全分离，并具备非常灵活的标签技术，可以实现无限制个性化的界面定制4 操作简单，利用已经制作好的模</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="微尔企业网站管理系统1.75 build build 090709">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9803" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="微尔企业网站管理系统1.75 build build 090709">
                        </a>
                    </div>
                <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(""); 
}