简单聊天机器人

很初级的对话框形式。以前做对话框使用js,今天尝试使用AngularJS做出来

这里直接使用自己写的JSON数据。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             margin: 0;
  9.             padding: 0;
  10.             background-color: #F7F7F7;
  11.         }
  12.  
  13.         h3 {
  14.             text-align: center;
  15.         }
  16.  
  17.         .chatbox {
  18.             width: 500px;
  19.             height: 500px;
  20.             margin: 0 auto;
  21.             border: 1px solid #CCC;
  22.             background-color: #FFF;
  23.             border-radius: 5px;
  24.         }
  25.  
  26.         .messages {
  27.             height: 350px;
  28.             padding: 20px 40px;
  29.             box-sizing: border-box;
  30.             border-bottom: 1px solid #CCC;
  31.             overflow: scroll;
  32.         }
  33.  
  34.         .messages h5 {
  35.             font-size: 20px;
  36.             margin: 10px 0;
  37.         }
  38.  
  39.         .messages p {
  40.             font-size: 18px;
  41.             margin: 0;
  42.         }
  43.         /*自己说*/
  44.  
  45.         .self {
  46.             text-align: left;
  47.         }
  48.         /*对方说*/
  49.  
  50.         .other {
  51.             text-align: right;
  52.         }
  53.  
  54.         .form {
  55.             height: 150px;
  56.         }
  57.  
  58.         .form .input {
  59.             height: 110px;
  60.             padding: 10px;
  61.             box-sizing: border-box;
  62.         }
  63.  
  64.         .form .btn {
  65.             height: 40px;
  66.             box-sizing: border-box;
  67.             border-top: 1px solid #CCC;
  68.         }
  69.  
  70.         .form textarea {
  71.             display: block;
  72.             width: 100%;
  73.             height: 100%;
  74.             box-sizing: border-box;
  75.             border: none;
  76.             /*宽度不发生变化*/
  77.             resize: none;
  78.             outline: none;
  79.             font-size: 20px;
  80.         }
  81.  
  82.         .form input {
  83.             display: block;
  84.             width: 100px;
  85.             height: 30px;
  86.             margin-top: 5px;
  87.             margin-right: 20px;
  88.             float: right;
  89.         }
  90.     </style>
  91.     <script src="../libs/angular.min.js"></script>
  92.     <script>
  93.         var App = angular.module('chatRoot', []);
  94.         App.controller('chatRootController', ['$scope', '$http', function ($scope, $http) {
  95.  
  96.             $scope.messages = [];
  97.             $scope.send = function () {
  98.                 var message = {text: $scope.message, role: '我说', cls: 'self' }
  99.                 $scope.messages.push(message);
  100.                 $scope.message = '';
  101.                 $http({
  102.                     url: 'chatRoot.php',
  103.                     method: 'post',
  104.                     headers: {
  105.                         'Content-Type':'application/x-www-form-urlencoded'
  106.                     },
  107.                 }).success(function (info) {
  108.                     console.log(info);
  109.                     message = {text: info, role: '鸣人说', cls: 'other' }
  110.                     $scope.messages.push(message);
  111.                 });
  112.             }
  113.         }]);
  114.     </script>
  115. </head>
  116. <body ng-app="chatRoot">
  117. <h3>简单的AngularJS实例</h3>
  118. <div class="chatbox" ng-controller="chatRootController">
  119.     <!-- 聊天内容 -->
  120.     <div class="messages">
  121.         <div class="{{message.cls}}" ng-repeat='message in messages'>
  122.             <h5>{{message.role}}</h5>
  123.             <p>{{message.text}}</p>
  124.         </div>
  125.     </div>
  126.     <!-- 表单 -->
  127.     <div class="form">
  128.         <!-- 输入框 -->
  129.         <div class="input">
  130.             <textarea ng-model='message'></textarea>
  131.         </div>
  132.         <!-- 按钮 -->
  133.         <div class="btn" ng-click = 'send()'>
  134.             <input type="button" value="发送">
  135.         </div>
  136.     </div>
  137. </div>
  138. </body>
  139. </html>

　　

AngularJS作出简单聊天机器人的更多相关文章

  1. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  2. 用Go语言实现一个简单的聊天机器人

    一.介绍 目的:使用Go语言写一个简单的聊天机器人,复习整合Go语言的语法和基础知识. 软件环境:Go1.9,Goland 2018.1.5. 二.回顾 Go语言基本构成要素:标识符.关键字.字面量. ...

  3. 构建一个简单的 Google Dialogflow 聊天机器人【上】

    概述 本教程将向您展示如何构建一个简单的Dialogflow聊天机器人,引导您完成Dialogflow的最重要功能.您将学习如何: 创建Dialogflow帐户和第一个Dialogflow聊天机器人, ...

  4. 【翻译】用AIML实现的Python人工智能聊天机器人

    前言 用python的AIML包很容易就能写一个人工智能聊天机器人. AIML是Artificial Intelligence Markup Language的简写, 但它只是一个简单的XML. 下面 ...

  5. 3.C#面向对象基础聊天机器人

    基于控制台的简单版的聊天机器人,词库可以自己添加. 聊天机器人1.0版本 源码如下: using System; using System.Collections.Generic; using Sys ...

  6. 使用图灵机器人API实现聊天机器人

    使用图灵机器人的API需要先注册,获取key才行,这我就不说了,自己到http://www.tuling123.com/注册一个账号即可. 下面就是一个简单的python调用API实现聊天机器人的简易 ...

  7. 用 AIML 开发人工智能聊天机器人

    借助 Python 的 AIML 包,我们很容易实现人工智能聊天机器人.AIML 指的是 Artificial Intelligence Markup Language (人工智能标记语言),它不过是 ...

  8. 笔记5：QQ群聊天机器人

    之前经常在别人群里看到有自动回复消息的机器人. 功能有好多,可以玩各种游戏.觉得还蛮有意思的.. 于是就去请教别人怎么弄得,但是他们都说得好复杂,好高大上,无非就是不想让别人弄 本人是个不会轻易放弃的 ...

  9. vue-miniQQ——基于Vue2实现的仿手机QQ单页面应用（接入了聊天机器人，能够进行正常对话）

    使用Vue2进行的仿手机QQ的webapp的制作,作品由个人独立开发,源码中进行了详细的注释. 由于自己也是初学Vue2,所以注释写的不够精简,请见谅. 项目地址 https://github.com ...

随机推荐

  1. 初版storm项目全流程自动化测试代码实现

    由于项目需要,写了版针对业务的自动化测试代码,主要应用场景在于由于业务日趋复杂,一些公共代码的改动,担心会影响已有业务.还没进行重写,但知识点还是不少的与大家分享实践下.首先,介绍下整个流处理的业务流 ...

  2. EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

    EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager impl ...

  3. Bugtags 实时跟踪插件 - BugtagsInsta

    BugtagsInsta 是 Bugtags SDK 的官方插件,应用集成成功后,可以在 Bugtags 云端管理平台实时查看应用的运行时数据:操作步骤.用户数据.控制台日志.Bugtags 日志.网 ...

  4. 前端网站helper

    聚合api 一.颜色类网站http://colorhunt.co 这个网站给我们提供了很多的配色方案,我们直接使用就OK了.使用方法也很简单,鼠标移动到对应的颜色上,我们就可以看到颜色的十六进制码,复 ...

  5. HDFS snapshot操作实战

    Hadoop从2.1.0版开始提供了HDFS SnapShot的功能.一个snapshot(快照)是一个全部文件系统.或者某个目录在某一时刻的镜像.快照在下面场景下是非常有用:防止用户的错误操作:管理 ...

  6. java 内存回收(GC)的方式

    java内存的管理其实就是对象内存的管理,其中包括对象的分配和释放 对应程序员来说分配对象使用new关键字,而释放一个对象只需要让它等于null,让程序不能再访问这个对象,这时对象是不可达的,GC负责 ...

  7. windows10降低IE版本

    win10支持的最低IE版本为IE10,现在IE最新版本为IE11,而win10自带的浏览器是microsoft  EDGE ,这给 以前的老系统带来很多不便,为了支持以前的老系统,只有降低IE浏览器 ...

  8. 测试家庭流媒体服务器Windows7

    测试首先选择了Darwin Streaming Server (DSS) for Windows 下载地址:http://dss.macosforge.org/downloads/DarwinStre ...

  9. vim入门过程

    先下载了一本VIM的用户手册. 看到可以使用vimtutor(VIM的入门教程,很不错,由浅入深)作为入门. Unix系统中,请在命令行输入:vimtutor,进入教程. MS-Windows系统中, ...

  10. python 核心编程课后练习(chapter 2)

    2-4 #2-4(a) print "enter a string" inputstring = raw_input() print"the string is: &qu ...