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


Posted in Javascript onFebruary 10, 2017

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

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

Javascript 相关文章推荐
JS实现简单的Canvas画图实例
Jul 04 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
影响jQuery使用的14个方面
Sep 01 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
JS中promise化微信小程序api
Apr 12 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
详解JavaScript中的链式调用
Nov 27 Javascript
基于jQuery实现咖啡订单管理简单应用
Feb 10 #Javascript
基于jQuery实现弹幕APP
Feb 10 #Javascript
BOM之navigator对象和用户代理检测
Feb 10 #Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 #Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
javascript自执行函数
Feb 10 #Javascript
You might like
php中autoload的用法总结
2013/11/08 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
php防止sql注入的方法详解
2017/02/20 PHP
基于PHP实现用户登录注册功能的详细教程
2020/08/04 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
footer定位页面底部(代码分享)
2017/03/07 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
2020/05/10 Javascript
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
[58:23]LGD vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python3.0 字典key排序
2008/12/24 Python
Python版微信红包分配算法
2015/05/04 Python
简单谈谈Python流程控制语句
2016/12/04 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
Python数据可视化:箱线图多种库画法
2019/11/06 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
tensorflow多维张量计算实例
2020/02/11 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
公司清洁工岗位职责
2013/12/14 职场文书
素质拓展感言
2014/01/29 职场文书
淘宝活动总结范文
2014/06/26 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
山东省召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技
MySQL sql模式设置引起的问题
2022/05/15 MySQL