团队筛选功能分享-CSDN博客

本文链接：https://blog.csdn.net/IKUNzhenin/article/details/135866348

本文详细描述了如何使用JavaScript的XMLHttpRequest对象进行异步HTTPGET请求，并处理响应数据，包括JSON解析、数据排序和动态渲染到HTML元素的过程。

摘要由CSDN通过智能技术生成

let xhr = new XMLHttpRequest();
// 创建一个新的XMLHttpRequest对象，命名为xhr。用来请求接口，处理异步操作；
// 这个对象用于在浏览器和服务器之间发送 HTTP 请求和接收响应。
xhr.open('get', 'js/index.json', true);
// 打开一个新的HTTP GET请求。// 请求的URL是'js/index.json'。// 第三个参数true表示请求是异步的。
xhr.send();
//发送要请求的要求
xhr.onreadystatechange = function() {
	// 设置一个事件监听器，当请求的状态发生变化时，这个函数就会被调用。
	if (xhr.readyState == 4 && xhr.status == 200) {
		// 检查请求是否已经完成（readyState == 4）并且是否成功（status == 200）。
		let text = xhr.responseText;
		// 获取响应的文本内容
		data = JSON.parse(text);
		// 将响应的文本内容解析为JSON对象，并将其赋值给变量data。
		item(data);
		// 调用一个名为item的函数，并传入data作为参数。用来渲染或显示数据的函数。
	}
};
let data = [];
//创建一个变量以方便存储数据
// sort排序
//变量为1
//变量为2
let a = 1;
// 声明了一个变量为a并初始化为1。用于决定显示排序顺序（从小到大）或从大到小的排序；
let displayStr = 1;
// 声明了一个变量 displayStr 并初始化为1。这个变量用于决定显示哪个数据项。
function item(data) {  
    let str = ''; // 用于存储一级数据的变量    
    // 用于决定显示哪个字符串的变量    
    for (let i = 0; i < data.length; i++) {  
        if (data[i].state == displayStr) {  
            str += `    
        <div class="data_itemtop">    
            <p>${data[i].name}</p>    
            <p>交易量：${data[i].sum}</p>    
        </div>    
        <div class="data_itembottom">`  
            str += `  
            <p>${data[i].member==1?`会员`:data[i].member==2?`VIP`:`合伙人`}</p>  `  
            // 当等级等于1时拼接会员，等于2时拼接Vip，等于3时，拼接合伙人  
            str += `  
            <p>邀请人：${data[i].inviter}</p>    
        </div>    
        <div class="link"></div>  
        `;  
        }  
    }  
    document.getElementsByClassName('details')[0].innerHTML = str; // 设置显示的内容为决定显示的字符串  
}
//一级二级跳转
function second(type) {
	if (type == 1) {
		displayStr = 1; // 切换到状态1
		document.querySelector('.line_left').style.marginLeft = '38%'; // 移动左边线条到指定位置 
	} else if (type == 2) {
		displayStr = 2; // 切换到状态2
		    document.querySelector('.line_left').style.marginLeft = '138%'; // 移动左边线条到初始位置 ；
	}
	item(data);
}
//本月累计
//遍历所有数据
//if判断为奇数时从小到大排序，
//为偶数时从大到小排序
//本月累计
// 在上方声明了一个变量为a并初始化为1。用于决定显示排序顺序（从小到大）或从大到小的排序；
document.getElementById('linst').onclick = function() {
	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].sum > data[j + 1].sum && data[i].state == 1) {
					let num = data[j];
					data[j] = data[j + 1];
					data[j + 1] = num;
				} else if (data[j].sum > data[j + 1].sum && data[i].state == 2) {
					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].sum < data[j + 1].sum && data[i].state == 1) {
					let num = data[j];
					data[j] = data[j + 1];
					data[j + 1] = num;
				} else if (data[j].sum < data[j + 1].sum && data[i].state == 2) {
					let num = data[j];
					data[j] = data[j + 1];
					data[j + 1] = num;
				}
			}
			console.log(data);
		}
	}
	item(data);
};
// 外层循环（由for (let i = 0; i < data.length - 1; i++)控制）：

// 这个循环负责确定哪些元素应该被交换。它从数组的第一个元素开始，一直检查到倒数第二个元素。
// 在每次迭代中，它都会检查数组中相邻的元素，看看它们是否满足交换的条件。
// 内层循环（由for (let j = 0; j < data.length - 1 - i; j++)控制）：

// 这个循环遍历数组中的元素，从第一个元素开始，直到data.length - 1 - i位置。
// 在每次迭代中，它都会比较相邻的两个元素（data[j]和data[j + 1]），并根据它们的sum属性值和state属性值决定是否交换它们的位置。
// 交换条件：

// 如果data[j].sum > data[j + 1].sum且data[j].state == 1，则交换这两个元素的位置。
// 如果data[j].sum > data[j + 1].sum且data[j].state == 2，则交换这两个元素的位置。

// 在外层循环的每次迭代中，都会打印排序后的数组。这有助于观察排序过程。
// 需要注意的是，这段代码存在一个问题：在交换元素时，它使用了临时变量num来存储要交换的元素的值。然而，由于JavaScript的作用域规则，在内层循环中定义的变量（如这里的num）不能在外部访问。因此，这段代码实际上不会按预期工作。要修复这个问题，可以将临时变量定义移动到循环外部或使用其他方法来交换元素的值。
//会员数
document.getElementsByClassName('member')[0].onclick = function() {
	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;
				}
			}
		}
	}
	item(data);
};
//等级-会员-vip-合伙人
function Center(e) {
	let l = [];
	// 声明了一个空数组 l用于存储筛选出来的符合条件的成员。
	for (let i = 0; i < data.length; i++) {
		//遍历数组
		if (data[i].member == e && data[i].state == displayStr) {
			//e是参数传会员，(e==1,2,3)
			//当用户等级等于用户点击的数据时并且状态等于一级数据和二级数据时
			l.push(data[i])
			//用什么数据渲染到空数组中
		}
	}
	item(l);
	// 将数据放在l的空数组中
}

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport"
			content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>团队筛选</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			/* 页面初始 */
			.head {
				width: 100%;
				height: 160px;
				top: 0px;
			}

			.black {
				width: 100%;
				height: 72px;
				background-color: #000;
			}

			.yuan {
				width: 100%;
				height: 80px;
				margin-top: -40px;
				background-color: #000;
				border-radius: 50%;
			}

			.pink {
				width: 94%;
				height: 120px;
				text-align: center;
				margin-left: 3%;
				border-radius: 5px;
				margin-top: -100px;
				top: 2%;
				background-color: rgba(255, 236, 208, 0.89);
			}

			.deal {
				line-height: 74px;
				height: 30px;
			}

			.price {
				line-height: 80px;
				height: 30px;
			}

			/* 上面顶部属性 */

			/* 下面内容属性*/
			.content {
				width: 100%;
				height: 2400px;
			}

			.content_top {
				width: 100%;
				height: 40px;
			}

			.top_cont {
				width: 100%;
				height: 40px;
				display: flex;
				background-color: aqua;
			}

			.con_left {
				width: 50%;
				text-align: center;
			}

			.con_right {
				width: 50%;
				height: 40px;
				text-align: center;
			}

			.con_left p {
				line-height: 40px;
				height: 40px;
			}

			.con_right p {
				line-height: 40px;
				height: 40px;
			}

			.line_left{  
			    width: 25%;  
			    height: 1px;  
				margin-left: 37%; /* 初始位置 */
			    background-color: #000;  
			    position: relative;  
			    transition: margin-left 0.5s ease-in-out; /* 添加过渡效果 */  
			}  
			.line_long {
				width: 100%;
				height: 1px;
				background-color: #cacaca;
			}

			/* 交易额 */
			.thbody {
				width: 100%;
				height: 40px;
				border: none;
				background-color: #cacaca;
				line-height: 40px;
				display: flex;
			}

			.thbody span {
				width: 70%;
				display: inline-block;
				text-align: center;
			}

			.select {
				position: relative;
				width: 80%;
				display: block;
			}

			.select p {
				text-align: center;
				width: 100%;
			}

			.select_draft {
				position: absolute;
				display: none;
			}

			.select:hover .select_draft {
				display: block;
				z-index: 99;
				background-color: #cacaca;
				width: 100%;
			}

			.link {
				width: 100%;
				height: 1px;
				background-color: #000;
			}
			.links{
				width: 100%;
				height: 1px;
				margin-top: 3%;
				background-color: #000;
			}
			.details{
				width: 100%;
				height: 100px;
			}
			.data_itemtop{
				width: 100%;
				height: 50px;
				display: flex;
			}
			.data_itemtop p{
				width: 50%;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
			.data_itembottom{
				width: 100%;
				height: 50px;
				display: flex;
			}
			.data_itembottom p{
				width: 50%;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
				/* 定义向右的动画 */  
			@keyframes moveRight {  
			  0% {  
			    transform: translateX(0);  
			  }  
			  100% {  
			    transform: translateX(200px);  
			  }  
			}  
			  
			/* 定义向左的动画 */  
			@keyframes moveLeft {  
			  0% {  
			    transform: translateX(0);  
			  }  
			  100% {  
			    transform: translateX(-200px);  
			  }  
			}  
		</style>
	</head>
	<body>
		<!-- 头部 -->
		<div class="head">
			<div class="black">

			</div>
			<div class="yuan">

			</div>
			<div class="pink">
				<div class="deal">本月交易量</div>
				<div class="price">￥0</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="content">
			<div class="content_top">
				<div class="line_long"></div>
				<div class="top_cont">
					<div class="con_left" onclick="second(1)">
						<p>一级</p>
						<div class="line_left"></div>
					</div>
					<div class="con_right" onclick="second(2)">
						<p>二级</p>
					</div>
				</div>
				<div class="line_long"></div>
			</div>
			<div class="thbody">
				<span class="select">
					<p>交易额</p>
					<div class="select_draft">
						<p id="linst">本月累计</p>
					</div>
				</span>
				<span class="select">
					<p>会员数</p>
					<div class="select_draft">
						<p class="member">会员数</p>
					</div>
				</span>
				<div class="select">
					<p>等级</p>
					<div class="select_draft">
						<p onclick="Center(1)">会员</p>
						<p onclick="Center(2)">VIP</p>
						<p onclick="Center(3)">合伙人</p>
					</div>
				</div>
			</div>
			<div class="link"></div>
			<!-- 正文 -->
			<div class="details">
				<div class="data_itemtop">
					<p>泰罗</p>
					<p>交易量：999</p>
				</div>
				<div class="data_itembottom">
					<p>合伙人</p>
					<p>邀请人：9</p>
				</div>
			</div>
		</div>
		<script src="./js/index.js"></script>
	</body>
</html>