网页简单对话机器人（无服务端）

最新推荐文章于 2022-04-27 20:22:18 发布

偷代码的猫

最新推荐文章于 2022-04-27 20:22:18 发布

阅读量1.2k

点赞数 1

分类专栏：聊天机器人 js 文章标签： js css

本文链接：https://blog.csdn.net/qq_34819372/article/details/76714287

版权

js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

聊天机器人

0 篇文章 0 订阅

订阅专栏

页面代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>智能机器人</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <style>
        body{background:linear-gradient(-45deg,#33ff00,#ce86e0,#00a4ff);margin:0;padding:0;}
        .top{
            width:100%;
            height:60px;
            background:rgba(0,0,0,0.5);
            text-align:center;
            color:#fff;
            font-size:25px;
            line-height:50px;
        }

        .content{
            width:800px;
            height:600px;
            background:rgba(255,255,255,0.5);
            margin:25px auto;
        }


        .c_head{
            position:absolute;
            width: 800px;
            height: 70px;
            background:linear-gradient(-45deg,#00ffff,#ffffff,#00ffff);
        }
        .logo{
            margin-top:5px;
            margin-left:30px;
            width:96px;
            height:60px;
            position: relative;
            float: left;
        }
        .logoImg{
            border-radius:120px; 
            opacity:0.6;
        }
        .title_logo{
            margin-left: 10px;
            position: relative;
            float: left;
        }
        .t_logo{
            font-size: 22px;
            text-align: center;
            color: #ffffff;
        }

        .c_center{
            width:800px;
            height: 530px;
            position:absolute;
            top:155px;
        }
        .speak_one{
            position:relative;
            margin-top:10px;
            width: 98%;
            height: 50px;
            margin-left:10px; 
        }
        .r_one_p{
            width:50px;
            height:50px;
            position: relative;
            float: left;
            border: 1px;
        }
        .r_one_photo{
            border-radius:50px;
            border: 1px;
        }
        .r_one_t{
            position: relative;
            float: left;
            margin-left:10px;
        }
        .r_one_text{
            width: 120%;height:35px;
            max-width:640px;
            margin-top:10px;
            text-align:center;
            background: #00ffff;
            opacity:0.8;
            border: 1px;
            border-radius:12px; 
        }
        .speak_two{
            float: right;
            margin-top: 10px;
            position:relative;
            width: 98%;
            height: 50px;
            margin-right: 10px;
        }
        .r_two_t{
            position: relative;
            float: right;
            margin-right:10px;

        }
        .r_two_text{
            width: 120%;height:35px;
            max-width:640px;
            margin-top:10px;
            text-align:center;
            background: #00ffff;
            opacity:0.8;
            border: 1px;
            border-radius:12px; 
            float: right;
        }
        .r_two_p{
            width:50px;
            height:50px;
            position: relative;
            float: right;
            border: 1px;
        }
        .r_two_photo{
            border-radius:50px;
            border: 1px;
        }

        .c_footer{
            position:absolute;
            top:630px;
            width:100%;height:60px;
        }
        .c_f_left{
            position: relative;
            float:left;
            margin-left: 15px;
        }
        .c_f_right{
            position: relative;
            float:left;
            margin-left: 15px;
        }
        .inputIfo{
            margin-top:5px;
            width: 680px;
            height: 45px;
            border-radius:5px;border: 1px;
            background:rgba(169,169,169,0.5);
        }
        .sendIfo{
            margin-top:5px;
            width:70px;
            height: 45px;
            border-radius:5px;border: 1px;
            background:rgba(105,105,105,0.5);
        }
        img{
            width: 100%;
            height:100%;
        }
        p{
            font-family: "楷体";
        }
    </style>


    <script type="text/javascript">
        function sendIfo(){
            //获取输入内容
            var text = document.getElementById("I_Ifo").value;
            //alert(text);

            //新建一行
            var new_speak_two = document.createElement("div");
            new_speak_two.className="speak_two";
            //alert(new_speak_two==null);

            //创建头像部分div
            var r_two_p = document.createElement("div");
            r_two_p.className="r_two_p";

            //创建图片img
            var r_two_photo = document.createElement("img");
            r_two_photo.className="r_two_photo";
            r_two_photo.src="images/robot_one.jpg";

            r_two_p.appendChild(r_two_photo);

            //新建对话部分div
            var r_two_t = document.createElement("div"); 
            r_two_t.className="r_two_t";

            //创建文本p标签
            var r_two_text = document.createElement("p");
            r_two_text.className="r_two_text";
            r_two_text.innerHTML=text;

            r_two_t.appendChild(r_two_text);

            //添加到new_speak_two
            new_speak_two.appendChild(r_two_p);
            new_speak_two.appendChild(r_two_t);

            //添加到c_center队尾
            var c_center_Div = document.getElementById("c_center_div");
            c_center_Div.appendChild(new_speak_two);


            //清空输入框内容
            document.getElementById("I_Ifo").value="";

            returnIfo(text);
        }

        function returnIfo(t){
            var text = t;
            connection(t);
            //新建一行
            var new_speak_one = document.createElement("div");
            new_speak_one.className="speak_one";
            //alert(new_speak_one==null);

            //创建头像部分div
            var r_one_p = document.createElement("div");
            r_one_p.className="r_one_p";

            //创建图片img
            var r_one_photo = document.createElement("img");
            r_one_photo.className="r_one_photo";
            r_one_photo.src="images/robot_two.jpg";

            r_one_p.appendChild(r_one_photo);

            //新建对话部分div
            var r_one_t = document.createElement("div"); 
            r_one_t.className="r_one_t";

            //创建文本p标签
            var r_one_text = document.createElement("p");
            r_one_text.className="r_two_text";
            r_one_text.innerHTML=text;

            r_one_t.appendChild(r_one_text);

            //添加到new_speak_one
            new_speak_one.appendChild(r_one_p);
            new_speak_one.appendChild(r_one_t);

            //添加到c_center队尾
            var c_center_Div = document.getElementById("c_center_div");
            c_center_Div.appendChild(new_speak_one);
        }

        //链接服务端
        function connection(t){

            var textOne = t;

            var xmlhttp = new XMLHttpRequest();

            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4)
                    var textTwo = xmlhttp.responseText;
            };
            xmlhttp.open("post","Query.java",true);
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xmlhttp.send(textOne);
        }

    </script>
  </head>

  <body>
    <div class="top">JAVA 开发人工智能</div>
    <div class="content">
        <div class="c_head">
            <div class="logo"><img src="images/robot_log.jpg"/ class="logoImg"></div>
            <div class="title_logo"><p class="t_logo">人工机器人</p></div>
        </div>

        <div class="c_center" id="c_center_div">
            <div class="speak_one">
                <div class="r_one_p"><img src="images/robot_two.jpg" class="r_one_photo"/></div>
                <div class="r_one_t"><p class="r_one_text">嗨，最近想我了吗</p></div>
            </div>

            <div class="speak_two" style="display: none;">
                <div class="r_two_p" ><img src="images/robot_one.jpg" class="r_two_photo"/></div>
                <div class="r_two_t"><p class="r_two_text">当然了？</p></div>
            </div>
        </div>

        <div class="c_footer">
            <div class="c_f_left"><input class="inputIfo" type="text" id="I_Ifo"/></div>
            <div class="c_f_right"><button class="sendIfo" onclick="sendIfo()"><p>发送</p></button></div>
        </div>
    </div>
    <div id="footer"></div>
  </body>
</html>

偷代码的猫

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
网页简单对话机器人（无服务端）

页面代码<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getSe
复制链接

扫一扫