[{
"name": "乐多",
"total": "342",
"class":2,
"inviter": 6,
"state": 2
}, {
"name": "灰灰的",
"total": "900",
"class":3,
"inviter": 4,
"state": 1
}, {
"name": "聂聂脸",
"total": "223",
"class":3,
"inviter": 2,
"state": 2
}, {
"name": "acc",
"total": "343",
"class":2,
"inviter": 4,
"state": 1
}, {
"name": "每天都想吃好吃的（见过刘巍版",
"total": "532",
"class":3,
"inviter": 4,
"state": 1
}, {
"name": "别重复",
"total": "453",
"class":1,
"inviter": 6,
"state": 2
}, {
"name": "南山",
"total": "340",
"class":1,
"inviter": 3,
"state": 1
}, {
"name": "郭包肉",
"total": "360",
"class":2,
"inviter": 2,
"state": 2
}, {
"name": "一个芒果",
"total": "1220",
"class":3,
"inviter": 9,
"state": 1
}]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.page {
width: 100%;
height: 160px;
margin-bottom: 20px;
}
.page_black {
width: 100%;
height: 312px;
background-color: #000000;
}
.page_blacks {
width: 100%;
height: 233px;
background-color: #000000;
border-radius: 50%;
margin-top: -115px;
}
.page_orange {
width: 92%;
height: 450px;
background-color: rgba(251, 219, 194, 0.8);
margin-top: -350px;
margin-left: 4%;
border-radius: 25px;
}
.years {
width: 100%;
height: 50px;
font-size: 40px;
text-align: center;
line-height: 300px;
}
.zero {
width: 100%;
font-size: 40px;
text-align: center;
line-height: 350px;
}
.lines {
width: 100%;
height: 0.5px;
background-color: #686363;
margin-top: 450px;
}
.line {
width: 100%;
height: 0.5px;
background-color: #000000;
}
.linet {
width: 100%;
height: 0.5px;
background-color: #000000;
}
.tier {
width: 100%;
height: 85px;
display: flex;
}
.first {
width: 40%;
margin-left: 10%;
text-align: center;
font-size: 40px;
line-height: 90px;
z-index: 21;
}
.second {
width: 40%;
text-align: center;
font-size: 40px;
line-height: 90px;
}
.change {
width: 36%;
height: 2px;
margin-left: 27%;
margin-top: -6px;
background-color: #552822
}
.sum {
width: 100%;
height: 85px;
display: flex;
justify-content: space-around;
}
.sum_text {
width: 25%;
text-align: center;
font-size: 40px;
line-height: 80px;
z-index: 20;
}
.text_year {
width: 186px;
height: 53px;
line-height: 45px;
background-color: #E0FDFF;
display: none;
margin-left: 12%;
}
.sum_text:hover .text_year {
display: block;
}
.sum_vip {
width: 25%;
text-align: center;
font-size: 40px;
line-height: 80px;
z-index: 20;
}
.text_vip {
width: 130px;
height: 50px;
line-height: 50px;
background-color: #E0FDFF;
display: none;
margin-left: 24%;
}
.sum_vip:hover .text_vip {
display: block;
}
.sum_class {
width: 25%;
text-align: center;
font-size: 40px;
line-height: 80px;
z-index: 20;
}
.text_class {
width: 160px;
height: 45px;
line-height: 40px;
background-color: #E0FDFF;
display: none;
margin-left: 15%;
}
.text_member {
width: 160px;
height: 46px;
line-height: 42px;
background-color: #E0FDFF;
display: none;
margin-left: 15%;
}
.text_partner {
width: 160px;
height: 60px;
line-height: 60px;
background-color: #E0FDFF;
display: none;
margin-left: 15%;
}
.sum_class:hover .text_class {
display: block;
}
.sum_class:hover .text_member {
display: block;
}
.sum_class:hover .text_partner {
display: block;
}
.null {
width: 100%;
height: 15px;
}
.message {
width: 100%;
height: 160px;
}
.name {
width: 100%;
height: 65px;
line-height: 100px;
display: flex;
justify-content: space-around;
font-size: 40px;
}
.price {
width: 100%;
height: 1150px;
}
</style>
</head>
<body>
<body>
<!-- 样式 -->
<div class="page">
<div class="page_black"></div>
<div class="page_blacks"></div>
<div class="page_orange">
<div class="years">本月交易量</div>
<div class="zero">￥0</div>
</div>
</div>
<!-- 数据 -->
<div class="all">
<!-- 一级 二级 -->
<div class="lines"></div>
<div class="tier">
<div class="first" onclick="first_level()">一级
<div class="change"></div>
</div>
<div class="second" onclick="second_level()">二级
</div>
</div>
<div class="linet"></div>
<!-- 交易额 -->
<div class="sum">
<div class="sum_text">
交易额<div class="text_year" onclick="textYears()">本月累计</div>
</div>
<div class="sum_vip">
会员数<div class="text_vip" onclick="textVip()">会员数</div>
</div>
<div class="sum_class">
等级<div class="text_class" onclick="member(1)">会员</div>
<div class="text_member" onclick="member(2)">vip</div>
<div class="text_partner" onclick="member(3)">合伙人</div>
</div>
</div>
<div class="line"></div>
<div class="null"></div>
<div class="line"></div>
<!-- 数据 -->
<div class="price">
<div class="message">
<div class="name">
<div class="first_row">刘巍</div>
<div class="second_row">交易量：342</div>
</div>
<div class="name">
<div class="first_row">VIP</div>
<div class="second_row">邀请人：6</div>
</div>
</div>
<div class="line"></div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
<script>
// 声明一个变量 data 用于存储从服务器获取的 JSON 数据
let data;
// 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
// 使用 open 方法指定要请求的地址、类型和方式
xhr.open('get', 'js/team.json', true);
// 发送请求
xhr.send();
// 绑定 onreadystatechange 事件处理函数，处理响应的状态变化
xhr.onreadystatechange = function() {
// 当请求完成并且响应状态为成功时（状态码 200）
if (xhr.readyState == 4 && xhr.status == 200) {
// 获取响应文本
let text = xhr.responseText;
console.log(text);
// 将响应文本解析为 JSON 对象
data = JSON.parse(text);
console.log(data);
// 调用列表渲染函数
list(data);
}
};
// 初始化状态 j
let j = 1;
// 渲染函数，根据状态 j 过滤数据并生成 HTML 内容
function list(data) {
let str = '';
// 遍历数据数组
for (let i = 0; i < data.length; i++) {
// 根据状态 j 过滤数据
if (data[i].state == j) {
// 拼接 HTML 字符串
str += `<div class="message">
<div class="name">
<div class="first_row">${data[i].name}</div>
<div class="second_row">交易量：${data[i].total}</div>
</div>
<div class="name">
<div class="first_row">${data[i].class == 1 ? `会员` : data[i].class == 2 ? `VIP` : `合伙人`}</div>
<div class="second_row">邀请人：${data[i].inviter}</div>
</div>
</div>
<div class="line"></div>`;
}
}
// 将生成的 HTML 内容渲染到页面中
document.getElementsByClassName('price')[0].innerHTML = str;
}
// 状态切换点击事件处理函数
let change = document.getElementsByClassName("change")[0];
// 第一级状态点击事件
function first_level() {
change.style.marginLeft = "33%";
change.style.transition = "all 1s";
j = 1;
list(data); // 更新数据
}
// 第二级状态点击事件
function second_level() {
change.style.marginLeft = "133%";
change.style.transition = "all 1s";
j = 2;
list(data); // 更新数据
}
// 本月累计交易量点击事件处理函数
let a = 1;
function textYears() {
if (a == 1) {
a = 2;
// 冒泡排序，按交易量从小到大排序
for (let i = 0; i < data.length - 1; i++) {
for (let j = 0; j < data.length - 1 - i; j++) {
if (Number(data[j].total) > Number(data[j + 1].total)) {
let num = data[j];
data[j] = data[j + 1];
data[j + 1] = num;
}
}
}
} else if (a == 2) {
a = 1;
// 冒泡排序，按交易量从大到小排序
for (let i = 0; i < data.length - 1; i++) {
for (let j = 0; j < data.length - 1 - i; j++) {
if (Number(data[j].total) < Number(data[j + 1].total)) {
let num = data[j];
data[j] = data[j + 1];
data[j + 1] = num;
}
}
}
}
list(data); // 更新数据
}
// 按邀请人数排序点击事件处理函数
function textVip() {
if (a == 1) {
a = 2;
// 冒泡排序，按邀请人数从小到大排序
for (let i = 0; i < data.length - 1; i++) {
for (let j = 0; j < data.length - 1 - i; j++) {
if (data[j].inviter > data[j + 1].inviter) {
let num = data[j];
data[j] = data[j + 1];
data[j + 1] = num;
}
}
}
} else if (a == 2) {
a = 1;
// 冒泡排序，按邀请人数从大到小排序
for (let i = 0; i < data.length - 1; i++) {
for (let j = 0; j < data.length - 1 - i; j++) {
if (data[j].inviter < data[j + 1].inviter) {
let num = data[j];
data[j] = data[j + 1];
data[j + 1] = num;
}
}
}
}
list(data); // 更新数据
};
// 按照邀请人数排序 点击一下奇数 从小到大 点两下为偶数 从大到小
function textVip() {
if (a == 1) {
a = 2;
// 冒泡排序 从小到大
for (let i = 0; i < data.length - 1; i++) {
for (let j = 0; j < data.length - 1 - i; j++) {
if (data[j].inviter > data[j + 1].inviter) {
let num = data[j];
data[j] = data[j + 1];
data[j + 1] = num;
};
};
};
console.log(data);
} else if (a == 2) {
a = 1;
// 冒泡排序 从大到小
for (let i = 0; i < data.length - 1; i++) {
for (let j = 0; j < data.length - 1 - i; j++) {
if (data[j].inviter < data[j + 1].inviter) {
let num = data[j];
data[j] = data[j + 1];
data[j + 1] = num;
};
};
};
};
// 渲染数据
list(data);
};
// 会员 VIP 合伙人
// 给会员 VIP 合伙人绑定相同的点击事件名称为member 等级为k 设置不同的状态 1，2，3
// 点击会员 k=1 点击vip k=2 点击合伙人 k=3
// let声明新的变量为g g=空数组 用来装需要用的数据 不用重新渲染全部数据
// for循环
// 上面已经设置变量j为一级 二级
// if判断数据的等级为k 并且状态在j中
// 在空字符串中添加点击 k获取的数据
// 渲染新数组
function member(k) {
let g = [];
for (let i = 0; i < data.length; i++) {
if (data[i].class == k && data[i].state == j) {
g.push(data[i]);
};
};
console.log(g);
list(g);
};
</script>
</body>
</html>
2225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
