代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ群管理系统</title>
<link rel="stylesheet" href="/CSS/bootstrap.css">
<link rel="stylesheet" href="/CSS/BackgroundSelect.css">
<link rel="stylesheet" href="/CSS/AddMembers.css">
<script src="/jquery.min.js"></script>
<script src="/bootstrap.js"></script>
</head>
<style>
/* 最多添加13个群员 群上限是14个成员 */
/* 我告诉你我喜欢你 */
/* 并不是一定要在一起 */
/* 只是希望你在人生低谷的时候 */
/* 不要灰心!至少有人曾经被你的魅力所吸引 */
/* 你我山前未相遇 */
/* 山后亦然别相逢 */
/* ————《郭源潮》宋冬野 */
/* 青涩不及当初 */
/* 聚散不由你我 */
input{
outline: none;
font-family: cursive;
}
body{
background: #1e201fd7 url("image/bg2.jpg")no-repeat;
background-size: 100% ;
}
#yangxz:hover{
background-color: rgba(255, 255, 255, 0.363);
box-shadow: 0px 0px 3px rgb(0, 0, 0,.9);
}
::-webkit-scrollbar {
display: none;
}
/* 调整窗口放大致100%时 头部导航的圆角边框去除 */
@media (min-width: 1536px){
.navbar {
border-radius: 0px;
border: 0px;
}
}
.navbar .container-fluid .navbar-header a.navbar-brand,
.navbar-inverse .navbar-nav li a{
color: rgb(240, 195, 112);
font-size: 17px;
line-height: 25px;
/* transition: .4s; */
text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.9);
}
.navbar .container-fluid .navbar-header a.navbar-brand{
color: rgb(240, 195, 112);
font-size: 22px;
}
.navbar-inverse .navbar-nav li a{
margin-left: 30px;
}
.navbar.navbar-inverse{
opacity: .8;
}
/* 将图片社会 */
.img-responsive{
display: inline;
}
/* 取消上边框 */
.table-responsive .table thead{
border-radius: 10px;
border-bottom: 0px solid rgba(255, 255, 255, 0.5)
}
.table-responsive .table tbody{
border: 0px;
transition: .2s;
}
/* 移入表格除了第一排其他颜色逐变 */
.table-responsive .table thead:nth-child(1) tr{
background-color:rgba(73, 73, 71, 0.369) ;
}
.table-responsive .table tbody.on tr{
background-color:#e6c61069 ;
border-top: 1px solid #e6c61069 ;
}
.table-responsive .table thead tr th{
font-size: 17px;
line-height:26px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding:10px 20px;
}
.table-responsive .table tbody tr td{
padding:10px 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 26px;
font-size: 14px;
color: #292828;
text-shadow: 7px 0px 7px #f0881156;
}
.table-responsive .table tbody tr td a{
transition: .3s;
color: #4b4848;
text-decoration:none;
}
.table-responsive .table tbody tr td a:hover{
color: #f5440e;
}
.table-responsive .table tbody tr td a:active{
color: #cf3809;
}
.table-responsive .table tbody:nth-child(1):hover{
color: #292828;
cursor: default;
}
.bgcolor{
position: absolute;
top: 740px;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
line-height: 30px;
height:120px;
}
/* 底部区块Begin */
.bgcolor p {
font-size:16px;
color: rgb(189, 189, 189);
text-shadow: 3px 0px 7px rgba(255, 255, 255, 0.9);
}
.bgcolor p a{
transition: .3s;
text-decoration:none;
font-size: 14px;
color: rgb(212, 211, 211);
text-shadow: 3px 0px 7px rgba(255, 255, 255, 0.9);
}
.bgcolor p a:hover{
color: #f0ae33;
}
.bgcolor p a:active{
color: #b48834;
}
/* 底部区块GND */
/* 控制行Begin */
/* 控制行GND */
.list-group{
margin-bottom: 0px;
}
.list-group .list-group-item{
font-size: 26px;
line-height: 65px;
font-weight: bold;
font-family: cursive;
text-shadow:2px 3px 7px rgb(209, 45, 141);
height: 80px;
border-radius: 0;
border: 0px;
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
margin: 0px auto;
width: 85%;
background: rgba(148, 86, 99, 0.336);
color: rgb(209, 45, 141);
}
/* 权限操作 */
.JurisdictionWd{
margin: 0px auto;
width: 85%;
padding: 0px;
}
.JurisdictionWd .jurisdiction{
font-size: 17px;
line-height: 60px;
height: 60px;
font-weight: bold;
font-family: cursive;
color: rgb(129, 126, 121);
text-shadow:3px 4px 7px rgb(221, 78, 162);
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
margin: 0px auto;
background: rgba(255, 255, 255, 0.5);
color: rgb(221, 78, 162);
}
.selectshow:focus{
box-shadow: 0 0 10px rgba(49, 49, 49, 0.8);
}
.btnselectshow:hover,
.addsystem:hover{
box-shadow: 0 0 10px rgb(0, 0, 0);
}
.btnselectshow:active,
.addsystem:active{
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
</style>
<body>
<!-- 头部导航栏 -->
<nav class="navbar navbar-inverse black" role="navigation">
<div class="container-fluid">
<div class="navbar-header ">
<a class="navbar-brand" href="javascript:;">Group Management System</a>
</div>
<div>
<ul class="nav navbar-nav pull-right">
<!-- active 类 为选中的元素添加黑色背景 -->
<li class=""><a href="javascript:;">User</a></li>
<li><a href="javascript:;">Add</a></li>
<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
background <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:;">Classic grey</a></li>
<li><a href="javascript:;">Eye care</a></li>
<li><a href="javascript:;">Cool purple</a></li>
<li><a href="javascript:;">Bright green</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 将表格放在table-responsive类盒子里 会变成响应式表格 -->
<div class="table-responsive">
<!-- 群ID -->
<ul class="list-group">
<li class="list-group-item">全国精神病集中放疗馆（666666666）</li>
</ul>
<!-- 权限部分 -->
<div class="container JurisdictionWd">
<div class="row jurisdiction">
<div class="col-md-6 pull-left">群成员人数：
<!-- 添加成员按钮 -->
<!-- 添加成员按钮 -->
<!-- 添加成员按钮 -->
<p id="CountPeople" style="display: inline;color: rgb(202, 10, 241);">6</p> /20
<button style="background-color: rgba(0, 0, 0);
opacity: .6;
border: 0px;
margin-bottom: 5px;
font-size: 16px;
color: white;
transition: .2s;
text-shadow: 0px 0px 7px rgba(255, 255, 255, .9);
border-radius: 14px;
width: 150px;
outline: none;" type="button" class="btn addsystem" data-toggle="modal" data-target="#myModal" id="addusernamebtn">添加成员</button>
<button style="background-color: rgba(0, 0, 0);
opacity: .6;
border: 0px;
margin-bottom: 5px;
font-size: 16px;
color: white;
transition: .2s;
text-shadow: 0px 0px 7px rgba(255, 255, 255, .9);
border-radius: 14px;
width: 150px;
outline: none;" type="button" class="btn addsystem" id="clearusernamebtn">清空所有成员数据</button>
</div>
<div class="col-md-6 pull-right text-right">
<div style="transition: .4s;" class="input-group">
<!-- 搜索成员框 -->
<!-- 搜索成员框 -->
<!-- 搜索成员框 -->
<input style="margin: 14px 5px 0px 0px;
width: 200px;
height: 32px;
border: 0px;
border-radius: 20px;
outline: none;
padding-left: 15px;
border-right:1px solid rgba(83, 71, 71, 0.24) ;
transition: .4s;
background-color: rgba(255, 255, 255, 0.4);" type="text" class="pull-right selectshow">
<span class="input-group-btn">
<!-- 查询按钮 -->
<!-- 查询按钮 -->
<!-- 查询按钮 -->
<button style="background-color: rgba(0, 0, 0, 0.459);
border: 0px;
color: white;
border-right:1px solid rgba(83, 71, 71, 0.24) ;
transition: .2s;
text-shadow: 0px 0px 7px rgba(255, 255, 255, .9);
border-radius: 14px;
outline: none;
"class="btn btnselectshow" type="button">
查询
</button>
</span>
</div><!-- /input-group -->
</div>
</div>
</div>
<!-- 表格部分 -->
<table class="table container" style="transition: .4s; background: rgba(255, 255, 255, 0.5);width: 85%;margin:0 auto;">
<thead>
<tr>
<!-- 用户用最多输入32个字符，一个汉字为两个字符 -->
<th class="col-md-3">成员</th>
<!-- 用户群昵称最多输入20个字符，一个汉字为两个字符 -->
<th class="col-md-2">群昵称</th>
<th class="col-md-2">QQ号</th>
<th class="col-md-1">性别</th>
<th class="col-md-1">Q龄</th>
<th class="col-md-1">入群时间</th>
<th class="col-md-1">权限操作</th>
</tr>
</thead>
<tbody class="on">
<tr>
<td><img src="/image/1.jpg" class="img-responsive" alt="Cinque Terre" width="20">2019.11.8:22.42</td>
<td>时光荏苒</td>
<td>1391625461</td>
<td>男</td>
<td>16年</td>
<td>2019 10 14</td>
<td>
<a style="margin-left: 16px;" type="button" href="javascript:;">
<span style="background-image: url(/image/download.png);
display: block;
position: absolute;
width: 15px;
height: 16px;
top: 277px;
background-repeat: no-repeat;
background-position: 0 -411px;"
id="yangxz" class="img-responsive" alt=""></span>群主
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- 模态框 -->
<!-- 模态框 -->
<!-- 模态框 -->
<div style="background:rgba(196, 41, 162, 0.329);
" class="modal fade" id="myModal" tabindex="-1" role="dialog"aria-labelledby="myModalLabel" aria-hidden="false" data-backdrop="false" data-keyboard="false">
<div class="modal-dialog">
<div style="margin-top: -12px;" class="modal-content AddToColor">
<div class="modal-header Addtitile">
<h4 class="Addtitiletext text-center" id="myModalLabel">
添加群成员
</h4>
</div>
<div style="padding-top:15px;padding-bottom:15px;padding-left:60px;overflow: hidden;" class="modal-body">
<!-- 输入框响应盒子 -->
<div style="width:600px;" id="Establish" class="container">
<label class="Tips" for="">输入的昵称不能大于15</label>
<div class="row">
<label for="">成员名字</label>
<input class="Member" type="text" placeholder="请输入您的用户名">
</div>
<div class="row">
<label for="">本群昵称</label>
<input class="GroupNickname" type="text" placeholder="请输入您在本群昵称">
</div>
<div class="row">
<label for=""> QQ号</label>
<input class="QQnumber" type="text" placeholder="请输入您的QQ账号">
</div>
<div class="row">
<label for=""> 性别</label>
<input class="sex" type="text" placeholder="请输入您的性别(男/女)">
</div>
<div class="row">
<label for=""> QQ年龄</label>
<input class="QQage" type="text" placeholder="请输入您QQ账号使用的时间">
</div>
<div class="row">
<label for="">入群时间</label>
<input class="GroupJoiningTime" type="text" placeholder="请输入群时间(年月日用空格隔开)">
</div>
</div>
</div>
<div style="border-top: 1px solid rgb(209, 45, 141);" class="modal-footer ">
<button style="outline: none;" type="button" id="addbtn" class="Submit">添加</button>
<button style="outline: none;" id="clearbtn" type="button" class="AddTobtn" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<div class="container bgcolor text-center">
<p>
友情链接：
<a href="javascript:;">QQ官方网站</a>
丨
<a href="javascript:;">腾讯开放平台</a>
丨
<a href="javascript:;">在线教育介绍</a>
丨
<a href="javascript:;">QQ会员</a>
丨
<a href="javascript:;">内涵段子</a>
丨
<a href="javascript:;">皮皮虾</a>
</p>
<p>Copyright © 1998-2015 Tencent. All Rights Reserved.</p>
<p>杨旭征 个人版权所有</p>
</div>
<!-- 公共对象（其他的对象都要调用的） -->
<script language = "JavaScript" src="/JS/main_public.js"></script>
<!-- 添加用户JS -->
<script language = "JavaScript" src="/JS/main_Add.js"></script>
<!-- 实时更新的JS -->
<script language = "JavaScript" src="/JS/main_RTU.js"></script>
<!-- 移除用户 -->
<script language = "JavaScript" src="/JS/main_delete.js"></script>
<!-- 修改用户数据 -->
<script language = "JavaScript" src="/JS/main_modify.js"></script>
<!-- 查找用户 -->
<script language = "JavaScript" src="/JS/main_lookup.js"></script>
<script language = "JavaScript">
$(function(){
// //当点击取消按钮时，将input框框内的值全部清空，以免再次进入的时候，关闭前的vaule的值还残留在input框内
// $("#clearbtn").click(function(){
// //jQuery选择器选择ID为Establish的元素下的类名为row的元素的子元素input，使用each遍历所有input框
// $("#Establish .row").children("input").each(function(){
// //将每个input框内的值赋值空（清空
// $(this).val("");
// // console.log($(this).val(""););
// });
// });
$("#clearusernamebtn").click(function(){
localStorage.clear();
window.location.reload();
})
});
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
