1、界面实现及逻辑判断
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>成语接龙机器人</title>
<style type="text/css">
body,div,span,input{
margin: 0px;
padding: 0px;
}
body{
background-color: rgba(215, 215, 215, 1);
}
#box{
margin: 1vh auto;
width: 430px;
height: 97vh;
border: 3px solid rgba(0, 0, 0, 1);
border-radius: 6px;
box-shadow: 4px 3px 7px rgba(0, 0, 0, 0.7);
overflow: hidden;
}
/*head start*/
#box .head{
width: 430px;
height: 9vh;
color: rgba(255, 255, 255, 1);
font-size: 7vh;
font-family: "楷体";
text-align: center;
text-shadow: 3px 4px 7px rgba(255, 255, 255, 0.5);
background-color: rgba(0, 0, 0, 0.7);
box-shadow: 4px 3px 7px rgba(0, 0, 0, 1);
}
/*head end*/
/*middle start*/
#screen{
width: 430px;
height: 81vh;
background-color: rgba(255, 255, 255, 0.5);
overflow: auto;
}
/*头像*/
#screen .header{
width: 36px;
height: 36px;
background-color: rgba(255, 165, 0, 1);
border-radius: 9px;
}
/*文本框*/
#screen [class$="send"]{
width: 300px;
position: relative;
}
#screen [class$="arrow"]{
border: 8px solid transparent;
position: absolute;
top: 10px;
z-index: 99;
}
#screen [class$="text"]{
padding: 9px;
font-family: "楷体";
background: rgb(172,218,71);
border-radius: 6px;
box-sizing: border-box;
position: absolute;
}
/*对方*/
#screen .other-side{
margin: 6px auto;
overflow: -webkit-paged-x;
float: left;
}
#screen .other-side .left-send{
float: left;
}
#screen .other-side .left-send .left-arrow{
border-right-color: rgb(172,218,71);
left: 4px;
}
#screen .other-side .left-send .left-text{
left: 20px;
}
/*自己*/
#screen .myself{
margin: 6px auto;
overflow: -webkit-paged-x;
float: right;
}
#screen .myself .right-send{
float: right;
}
#screen .myself .right-send .right-arrow{
border-left-color: rgb(172,218,71);
right: 4px;
}
#screen .myself .right-send .right-text{
right: 20px;
}
/*滚动条*/
#screen::-webkit-scrollbar{
width: 4px;
}
#screen::-webkit-scrollbar-track{
box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
border-radius: 12px;
}
#screen::-webkit-scrollbar-thumb{
background-color: rgba(75, 180, 225, 1);
border-radius: 12px;
}
/*middle end*/
/*foot start*/
#box .foot{
width: 430px;
height: 7vh;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
box-shadow: 3px -1px 9px rgba(0, 0, 0, 1);
}
#box .foot #input{
margin: auto;
width: 321px;
height: 34px;
font-size: 24px;
font-family: "楷体";
border: 1px solid transparent;
display: block;
border-radius: 6px;
box-shadow: 4px 3px 12px rgba(0, 0, 0, 1);
}
#box .foot #but{
margin: auto;
width: 64px;
height: 36px;
font-size: 24px;
font-family: "楷体";
text-align: center;
line-height: 36px;
background-color: rgba(134, 215, 43, 1);
display: block;
border-radius: 3px;
box-s