jquery实现聊天机器人


Posted in jQuery onFebruary 08, 2020

本文实例为大家分享了jquery实现聊天机器人的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="./demo.css" rel="external nofollow" >
</head>

<body>
  <div class="wrapper">
    <h4 class="header">俊凯</h4>
    <div class="content">
      <div class="mine">
        <img src="./image/5.jpg" alt="">
        <div class="text">
          今天天气怎么样
        </div>
      </div>
      <div class="robot">
        <img src="./image/5.jpg" alt="">
        <div class="text">
          天气很好呀适合出门呢~~
        </div>
      </div>
    </div>
    <div class="inp">
      <input type="text" id="word">
      <button id="submit">发送</button>
    </div>

  </div>
  <script src="./jquery.js"></script>
  <script src="./demo.js"></script>
  
  <script>
    
  
  </script>

  
</body>
</html>

CSS:

* {
  padding: 0;
  margin: 0;
}

::-webkit-scrollbar {
  width: 0px;
}
html, body {
  height: 100%;
}
.wrapper {
  width: 600px;
  margin: 0 auto;
  border: 1px solid #eee;
  height: 100%;
  position: relative;
  background-color: #eee;
  /* overflow: hidden; */
}
.wrapper .content {
  /* overflow-x: hidden;
  overflow-y: scroll; */
  overflow: auto;
  height: calc(100% - 110px);
  line-height: 30px;
  padding: 10px;
}
.wrapper .header {
  background-color: grey;
  text-align: center;
  color: #fff;
  height: 40px;
  line-height: 40px;
  font-weight: 700;
}

.wrapper .content .mine {
  float: right;
  width: 400px;
}
.wrapper .content .robot {
  float: left;
  width: 400px;
}
.wrapper .content img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
}
.content .mine img {
  float: right;
}
.content .mine .text {
  float: right;
  background-color: greenyellow;
}
.content .robot img {
  float: left;
}
.content .robot .text {
  float: left;
  background-color: #fff;
}
.text {
  max-width: 250px;
  font-size: 16px;
  padding: 0 10px;
  border-radius: 3px;
  /* border: 1px solid #fff; */
}
.inp {
  width: 100%;
  height: 50px;
  line-height: 50px;
  position: absolute;
  bottom: 0px;
  font-size: 0;
  text-align: center;
  /* padding: 0 10px; */
  background-color: #ddd;
  /* vertical-align: middle; */
}

.inp input {
  width: calc(100% - 80px);
  height: 30px;
  line-height: 30px;
  border: none;
  outline: none;
  font-size: 14px;
  display: inline-block;
  vertical-align: middle;
}
.inp button {
  width: 60px;
  height: 30px;
  font-size: 14px;
  border: none;
  outline: none;
  background-color: #ccc;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}

js:

$('#submit').click(function(){
  var val = $('#word').val();
  if(val){
    renderDom('mine',val)
    $('#word').val('')
     $.ajax({
      type:'GET',
      url:'http://temp.duyiedu.com/api/chat',
      data:{
        text:val
      },
      dataType:'json',
      success:function(res){
        // console.log(res)
        renderDom('robot',res.text);
      }
    })
  }
})
$('#word').on('keyup',function (e){
  if(e.keyCode == 13){
    $('#submit').click()
  }
})
function renderDom(role,text){
  $(`
  <div class="${role}">
  <img src="./image/${role == 'mine' ? '5.jpg' : '7.jpg'}" alt="">
  <div class="text">
    ${text}
  </div>
</div>`).appendTo($(`.content`));
var scrollHeight = $('.content')[0].scrollHeight;
var contentHeight = $('.content')[0].offsetHeight;
$('.content').scrollTop(scrollHeight-contentHeight);


}

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

jQuery 相关文章推荐
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery实现获取多选框的值示例
Feb 07 #jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 #jQuery
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 #jQuery
9种方法优化jQuery代码详解
Feb 04 #jQuery
jQuery实现小火箭返回顶部特效
Feb 03 #jQuery
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
Feb 01 #jQuery
You might like
php实现文件下载实例分享
2014/06/02 PHP
php递归函数怎么用才有效
2018/02/24 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JS封装cookie操作函数实例(设置、读取、删除)
2015/11/17 Javascript
jQuery动画效果相关方法实例分析
2015/12/31 Javascript
jQuery div拖拽用法实例
2016/01/14 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
前端性能优化及技巧
2016/05/06 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
2016/11/23 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
webpack配置的最佳实践分享
2017/04/21 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
js中的数组对象排序分析
2018/12/11 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
用Python程序抓取网页的HTML信息的一个小实例
2015/05/02 Python
python删除列表内容
2015/08/04 Python
Python编程中的文件操作攻略
2015/10/16 Python
Python注释详解
2016/06/01 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
英文自我鉴定
2013/12/10 职场文书
十佳党员事迹材料
2014/08/28 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
请学会珍惜眼前,因为人生没有下辈子!
2019/11/12 职场文书