页面代码
<%@ 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>