基于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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
May 13 Javascript
jQuery学习笔记之总体架构
Jun 03 Javascript
5个JavaScript经典面试题
Oct 13 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
JavaScript实现强制重定向至HTTPS页面
Jun 10 Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
vue props 单项数据流实例分享
Feb 16 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 $_FILES函数详解
2011/03/09 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
浅析JavaScript中浏览器的兼容问题
2016/04/19 Javascript
拖动时防止选中
2017/02/03 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
几种响应式文字详解
2017/05/19 Javascript
Vuejs 单文件组件实例详解
2018/02/09 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
Python实现基于权重的随机数2种方法
2015/04/28 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
Python 绘制可视化折线图
2020/07/22 Python
python如何实时获取tcpdump输出
2020/09/16 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
自我评价范文分享
2014/01/04 职场文书
事务机电主管工作职责
2014/02/25 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
先进工作者推荐材料
2014/12/23 职场文书
个人委托书范文
2015/01/28 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
netty 实现tomcat的示例代码
2022/06/05 Servers