online-chatroom
Version:
要修改url路径的文件： 1.html/login.html 48行 2.js/wsServer.js 6行 3.js/ws.js 第2行 和 第11行 4.js/app.js 14行(可以不修改)
118 lines (111 loc) • 3.66 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>聊天框</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 600px;
height: 600px;
border: 1px solid black;
position: relative;
border-radius: 2px;
left: 50%;
top: 30px;
transform: translate(-50%);
}
.box>h3{
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
background-color: lightblue;
border-radius: 3px;
}
.box>.talkAbout{
height: 400px;
overflow: scroll;
border-bottom: 1px solid gray;
}
.box>.talkAbout>dt{
margin: 30px 0 10px 10px;
border-radius: 5px;
}
.box>.talkAbout>dd{
margin: 0px 250px 10px 30px;
background-color: lightgray;
padding: 10px;
border-radius: 5px;
display: inline-block;
}
.box>.talkAbout>span{
display: block;
width: 100%;
text-align: center;
font-size: 12px;
color: lightgray;
}
.box>textarea{
width: 90%;
height: 100px;
position: relative;
left: 50%;
top: 20px;
transform: translate(-50%);
border: 0;
outline: 0;
resize:none;
}
.box>input{
position: relative;
height: 20px;
width: 50px;
right: 0;
top: 20px;
background-color: lightblue;
border-radius: 5px;
color: white;
border: 0;
outline: 0;
}
.right{
text-align: right;
padding-right: 10px;
}
.right + dd{
margin: 0px 30px 10px 250px;
display: block;
background: white;
overflow: hidden;
}
.right + dd>p{
float: right;
background-color: lightgray;
padding: 10px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box">
<h3>用户名</h3>
<div class="talkAbout">
<dt></dt>
<dd>欢 迎 进 入 聊 天 室 ！</dd>
<!-- <dt class="right">用户名</dt>
<dd><p>这是内容容聊天内容聊天内容聊天内容聊天聊天内容聊天内容聊天内容聊天内容聊天内容聊天容聊天内容聊天内容聊天内容聊天聊天内容聊天内容聊天内容聊天内容聊天内容聊天</p></dd>
<span>***已上线</span> -->
<!-- <dt>用户名</dt>
<dd>聊天内容聊天内容聊天内容聊天内容聊天内容聊天聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容聊天内容</dd> -->
</div>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<input type="button" value="发送" id="btn">
</div>
</body>
</html>
<script src="./ws.js"></script>