简单聊天机器人

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body {

            margin: 0;

            padding: 0;

            background-color: #F7F7F7;

        }

        h3 {

            text-align: center;

        }

        .chatbox {

            width: 500px;

            height: 500px;

            margin: 0 auto;

            border: 1px solid #CCC;

            background-color: #FFF;

            border-radius: 5px;

        }

        .messages {

            height: 350px;

            padding: 20px 40px;

            box-sizing: border-box;

            border-bottom: 1px solid #CCC;

            overflow: scroll;

        }

        .messages h5 {

            font-size: 20px;

            margin: 10px 0;

        }

        .messages p {

            font-size: 18px;

            margin: 0;

        }

        /*自己说*/

        .self {

            text-align: left;

        }

        /*对方说*/

        .other {

            text-align: right;

        }

        .form {

            height: 150px;

        }

        .form .input {

            height: 110px;

            padding: 10px;

            box-sizing: border-box;

        }

        .form .btn {

            height: 40px;

            box-sizing: border-box;

            border-top: 1px solid #CCC;

        }

        .form textarea {

            display: block;

            width: 100%;

            height: 100%;

            box-sizing: border-box;

            border: none;

            /*宽度不发生变化*/

            resize: none;

            outline: none;

            font-size: 20px;

        }

        .form input {

            display: block;

            width: 100px;

            height: 30px;

            margin-top: 5px;

            margin-right: 20px;

            float: right;

        }

    </style>

    <script src="../libs/angular.min.js"></script>

    <script>

        var App = angular.module('chatRoot', []);

        App.controller('chatRootController', ['$scope', '$http', function ($scope, $http) {

            $scope.messages = [];

            $scope.send = function () {

                var message = {text: $scope.message, role: '我说', cls: 'self' }

                $scope.messages.push(message);

                $scope.message = '';

                $http({

                    url: 'chatRoot.php',

                    method: 'post',

                    headers: {

                        'Content-Type':'application/x-www-form-urlencoded'

                    },

                }).success(function (info) {

                    console.log(info);

                    message = {text: info, role: '鸣人说', cls: 'other' }

                    $scope.messages.push(message);

                });

            }

        }]);

    </script>

</head>

<body ng-app="chatRoot">

<h3>简单的AngularJS实例</h3>

<div class="chatbox" ng-controller="chatRootController">

    <!-- 聊天内容 -->

    <div class="messages">

        <div class="{{message.cls}}" ng-repeat='message in messages'>

            <h5>{{message.role}}</h5>

            <p>{{message.text}}</p>

        </div>

    </div>

    <!-- 表单 -->

    <div class="form">

        <!-- 输入框 -->

        <div class="input">

            <textarea ng-model='message'></textarea>

        </div>

        <!-- 按钮 -->

        <div class="btn" ng-click = 'send()'>

            <input type="button" value="发送">

        </div>

    </div>

</div>

</body>

</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. web.py学习心得

    1.注意判断数字时,如果是get传递的参数,一定要用int转换.不然出错. 2.$var 定义时,冒号后的内容不是python内容,需加上$符号.如$var naviId:$naviId. 3.各个模 ...

  3. 解决触摸屏设备click事件300ms的延迟的问题

    从点击屏幕上的元素到触发元素的 click 事件,移动浏览器(触摸屏)会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作.300ms的等待 ...

  4. Shell中取得文件的最后修改时间

    stat -c %y file 取得修改日期 -,-,-

  5. 图形学基础教程02－－顶点数据和SHADER寄存器 (带演示程序)

    本文系原创,欢迎转载,请标明链接 http://www.cnblogs.com/luming1979 有问题欢迎加qq群讨论:366239605

  6. Qt 环境下的mapx控件-------2

    今天花了一天的时间去查找mapx相关的资料,但是到最后想要的东西还是一无所获,不过还是学到了很多东西.下面以大家分享一下: mapx软件的安装:下载后安装mapx软件,成功后会在安装路径下存在acti ...

  7. instanceof关键字

    instanceof是Java.php的一个二元操作符(运算符),和==.>.<是同一类东西.由于它是由字母组成的,所以也是Java的保留关键字.它的作用是判断其左边对象是否为其右边类的实 ...

  8. Win10光驱不见了

    1. 网上教程试了很多,如下: http://jingyan.baidu.com/article/02027811656a8b1bcd9ce570.html http://jingyan.todgo. ...

  9. HTML5 File详解

    input file控件限制上传文件类型 Html5 FileReader 对文件进行Base64编码 FileReader.readAsDataURL

  10. Spark Streaming源码解读之No Receivers彻底思考

    本期内容 : Direct Acess Kafka Spark Streaming接收数据现在支持的两种方式: 01. Receiver的方式来接收数据,及输入数据的控制 02. No Receive ...