jQuery_jquery に基づいたシンプルな人工知能チャット ルームの実装

この記事では主に、jQuery に基づいた簡単な人工知能チャット ルームの実装に関連する情報を詳しく紹介します。興味のある友人は参考にしてください。

投げるのに 2 時間かかりました。公開されると、jQuery 人工知能チャット ルームは次のようになります:

主な機能:

1. もちろんチャットです~飛行機ボタンをクリックするか、Enter キーを押してメッセージを送信します。パネルへのメッセージ。
2. 特定のコンテンツを入力すると、システムが対応する応答を返します (ここでは、「こんにちは、お元気ですか、時間を尋ねる」という自動応答のみを設定しています)。
3. パネル上のすべてのチャット履歴を消去するには、十字をクリックします。
4. 時間を尋ねると、現在時刻に基づいて異なる応答が与えられます。たとえば、22 ～ 23 時の場合、システムは「おやすみ」と応答します。
5. チャットが進行すると、チャット パネルの右側のスクロール バーが下部に残ります。

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>

*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=&#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(""); 
}

デモはこちらです。FORK: AI Chat Box へようこそ。

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、皆さんもスクリプトハウスを応援していただければ幸いです。