欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-01-15 13:58:14
花了俩小时折腾出来的,jquery人工智能聊天室长这样: 主要功能: 1.当然是聊天啦~点击飞机按钮或者回车可以发送消息到面板。 2.输入特定的内容,系统会给你相...

花了俩小时折腾出来的,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

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