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加载单文件vue组件的方法
Jun 20 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
jQuery实现购物车全功能
Jan 11 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脚本数据库功能详解(下)
2006/10/09 PHP
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
根据中文裁减字符串函数的php代码
2013/12/03 PHP
php中return的用法实例分析
2015/02/28 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
2019/09/20 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
Python多线程编程简单介绍
2015/04/13 Python
python+selenium识别验证码并登录的示例代码
2017/12/21 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
分析经典Python开发工程师面试题
2019/04/08 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
仓库管理专业个人的自我评价
2013/12/30 职场文书
童装店创业计划书
2014/01/09 职场文书
绩效工资分配方案
2014/01/18 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
春季运动会开幕词
2015/01/28 职场文书
介绍信样本
2015/01/31 职场文书
文化大革命观后感
2015/06/17 职场文书