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中fade(),show()起始位置的一点小发现
Apr 25 jQuery
jquery dataTable 获取某行数据
May 05 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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
apache rewrite_module模块使用教程
2008/01/10 PHP
本地计算机无法启动Apache故障处理
2014/08/08 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
解决laravel groupBy 对查询结果进行分组出现的问题
2019/10/09 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
在vue中axios设置timeout超时的操作
2020/09/04 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
ESLint 是如何检查 .vue 文件的
2020/11/30 Vue.js
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
Python输出指定字符串的方法
2020/02/06 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
文员个人求职自荐信
2013/09/21 职场文书
财会自我鉴定范文
2013/12/27 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
2014第二批党的群众路线教育实践活动对照检查材料思想汇报
2014/09/18 职场文书
安全教育主题班会教案
2015/08/12 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript