<! DOCTYPE HTML>
<HTML>
<머리>
<메타 문자 집합 = "UTF-8"/>
<제목> 결과 - Chatbot </ 제목>
<스타일 유형 = "텍스트 / CSS">
몸 {
여백 : 0;
패딩 : 0;
배경 : 홈페이지 ( "../ 정적 / bg2.jpg");
배경 사이즈 : 130 % 120 %;
검정색;
}
#wrap {
총수 : 상대;
왼쪽 : 300 픽셀;
최고 : 0;
폭 : 1304px;
높이 : 768px;
여백 : 0 자동;
}
· 출력 {
총수 : 절대;
왼쪽 : 6 픽셀;
상단 : 45 픽셀;
폭 : 509px;
높이 : 528px;
경계 위쪽 : 고체 25 픽셀 RGB (92, 177, 247);
배경 : 홈페이지 ( "../ 정적 / chatbg.jpg");
불투명 : 1.7;
}
.chat-show1 {· 출력
총수 : 상대;
왼쪽 : 40px;
}
.chat-show1 : {전에
내용 : "";
위치 : 절대;
왼쪽 : -41px;
디스플레이 : 블록;
폭 : 40px;
높이 : 40px;
경계 반경 : 50 %;
배경 : 홈페이지 ( "../ 정적 / look1.jpg");
배경 사이즈 : 100 % 100 %;
}
.chat-show2 {· 출력
총수 : 상대;
왼쪽 : 198px;
배경 : RGB (92, 247, 113);
}
.chat-show2 : {전에
내용 : "";
위치 : 절대;
오른쪽 : -39px;
디스플레이 : 블록;
폭 : 40px;
높이 : 40px;
경계 반경 : 50 %;
배경 : 홈페이지 ( "../ 정적 / look2.jpg");
배경 사이즈 : 100 % 100 %;
}
· 출력 탑 {
총수 : 절대;
상단 : -40px;
폭 : 100 %;
높이 : 40px;
배경 : RGB (252, 132, 21);
경계 반경 : 6 %;
색상 : 흰색;
}
.chat 이름 {
총수 : 절대;
상단 : 50 %;
좌측 : 50 %;
변환 (-50 %, -50 %) 변환;
}
.side {
총수 : 절대;
왼쪽 : 515px;
상단 : 30 픽셀;
폭 : 128px, 세로;
높이 : 569px;
배경 : 홈페이지 ( "../ 정적 / sidebg.jpg");
경계 반경 : 2 %;
배경 사이즈 : 100 % 100 %;
}
.input {
총수 : 절대;
왼쪽 : 5px;
하단 : 68px;
폭 : 640;
높이 : 103px;
배경 : RGBA (255, 255, 255, 0.6);
폰트 크기 : 15 픽셀;
개요 : 없음;
경계 반경 : 5 %;
}
텍스트 영역 {
불투명 : 0.4;
검정색;
폰트 중량 : 굵은;
폰트 크기 : 20 픽셀;
}
는 .text {
폭 : 505px;
높이 : 105px;
개요 : 없음;
배경 : RGBA (255, 255, 255, 0.7);
경계 반경 : 8 %;
}
.SUB {
총수 : 절대;
상단 : 20 픽셀;
오른쪽 : 10px;
폭 : 100 픽셀;
높이 : 69px;
경계 반경 : 20 %;
배경 : RGB (255, 255, 255);
개요 : 없음;
}
P {
배경 : 분홍색;
높이 : 40px;
폭 : 50 %;
경계 반경 : 20 %;
패딩 왼쪽 : 17px;
}
</ 스타일>
</ head>
<body>
<div ID = "래핑">
<div 클래스 = "출력">
<div 클래스 = "출력 가기">
<div 클래스 = "채팅 이름을">
<H3>小进进</ H3>
< / div>
</ div>
<div 클래스 = "채팅 출력을">
<p 클래스 = "채팅-show1을">啦啦啦啦啦啦啦啦</ p>
<p 클래스 = "채팅-show2을">哈哈哈哈哈哈哈哈</ p>
</ div>
</ div>
<div 클래스 = "측면"> </ div>
<div 클래스 = "입력">
<form>
<텍스트 영역 NAME = "문제"클래스 = "텍스트" ID = "텍스트 1"> </ 텍스트 영역> 및 NBSP;
<버튼형 = "버튼"값 = "
createElement와 ( "P"); op.className는 = "채팅 - show2";
op.innerText = VALUE1;
text_out.appendChild (OP);
text_input.value = "";
// 입력键触发按钮点击事件
document.onkeydown = 함수 () {
경우 (event.keyCode의 == 13) {
obtn.click ();
false를 반환;
}
}
//响应数据处理
VAR STR = { '질문': 값 1};
VAR의 XHR = 새로운 XMLHttpRequest 객체 ();
xhr.open ( "POST", "/ 결과 /", TRUE);
xhr.setRequestHeader ( '콘텐츠 유형', '애플리케이션 / JSON; 문자셋 = UTF-8 ");
VAR 데이터 = JSON.stringify (STR);
위해 xhr.send (데이터);
xhr.onreadystatechange = 함수 () {
경우 (xhr.readyState === 4)
경우 (xhr.status> = 200 && xhr.status <300 || XHR.
VAR 값 = JSON.parse (텍스트);
배 ++;
경우 (회> = 8) {
회 = 0;
text_out.innerHTML = "";
}
VAR 연산 = document.createElement ( "P");
op.className는 = "채팅 - show1";
op.innerText 값 = [ '대답'];
text_out.appendChild (OP);
}
}
}
</ SCRIPT>
<스크립트 유형 = "텍스트 / 자바 스크립트"문자 집합 = "UTF-8"SRC = "https://files.cnblogs.com/files/liuzhou1/L2Dwidget.0.min.js">
< / 스크립트>
<스크립트 유형 = "텍스트 / 자바 스크립트"문자 집합 = "UTF-8"SRC = "https://files.cnblogs.com/files/liuzhou1/L2Dwidget.min.js">
</ script>
<스크립트 유형 = "
"폭"200
"높이"400
"불투명"0.3
"위치" "오른쪽",
"점이 hOffset"0
"vOffset을"0
}
});
</ script>
</ BODY>
</ HTML>