团队筛选功能制作

最新推荐文章于 2024-11-17 22:31:08 发布

乐多_L

最新推荐文章于 2024-11-17 22:31:08 发布

阅读量603

点赞数 11

文章标签：前端 html javascript

本文链接：https://blog.csdn.net/2301_81449444/article/details/135868635

版权

HTML内容

<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="lines"></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>

css样式

<style>
			* {
				margin: 0;
				padding: 0;
			}

			.page {
				width: 100%;
				height: 160px;
				margin-bottom: 20px;
			}

			.page_black {
				width: 100%;
				height: 80px;
				background-color: #000000;
			}

			.page_blacks {
				width: 100%;
				height: 60px;
				background-color: #000000;
				border-radius: 50%;
				margin-top: -30px;
			}

			.page_orange {
				width: 94%;
				height: 130px;
				background-color: rgba(255, 236, 208, 0.9);
				margin-top: -90px;
				margin-left: 3%;
				border-radius: 5px;
			}

			.years {
				width: 100%;
				height: 50px;
				font-size: 16px;
				text-align: center;
				line-height: 50px;
			}

			.zero {
				width: 100%;
				font-size: 16px;
				text-align: center;
			}

			.lines {
				width: 100%;
				height: 0.5px;
				background-color: #dfdfdf;
			}

			.line {
				width: 100%;
				height: 0.5px;
				background-color: #000000;
			}

			.tier {
				width: 100%;
				height: 39px;
				background-color: #D6FFF1;
				display: flex;
			}

			.first {
				width: 40%;
				margin-left: 10%;
				text-align: center;
				font-size: 16px;
				line-height: 40px;
				z-index: 21;
			}

			.second {
				width: 40%;
				text-align: center;
				font-size: 16px;
				line-height: 40px;
			}

			.change {
				width: 30%;
				height: 2px;
				margin-left: 30%;
				margin-top: -3px;
				background-color: #000000;
			}

			.sum {
				width: 100%;
				height: 35px;
				background-color: #FFEBFD;
				display: flex;
				justify-content: space-around;
			}

			.sum_text {
				width: 25%;
				text-align: center;
				font-size: 16px;
				line-height: 35px;
				background-color: #FFEBFD;
				z-index: 20;
			}

			.text_year {
				width: 80px;
				height: 30px;
				line-height: 30px;
				background-color: #E0FDFF;
				display: none;
			}

			.sum_text:hover .text_year {
				display: block;
			}

			.sum_vip {
				width: 25%;
				text-align: center;
				font-size: 16px;
				line-height: 35px;
				background-color: #FFEBFD;
				z-index: 20;
			}

			.text_vip {
				width: 80px;
				height: 30px;
				line-height: 30px;
				background-color: #E0FDFF;
				display: none;
			}

			.sum_vip:hover .text_vip {
				display: block;
			}


			.sum_class {
				width: 25%;
				text-align: center;
				font-size: 16px;
				line-height: 35px;
				background-color: #FFEBFD;
				z-index: 20;
			}

			.text_class {
				width: 80px;
				height: 30px;
				line-height: 30px;
				background-color: #E0FDFF;
				display: none;
			}

			.text_member {
				width: 80px;
				height: 30px;
				line-height: 30px;
				background-color: #E0FDFF;
				display: none;
			}

			.text_partner {
				width: 80px;
				height: 30px;
				line-height: 30px;
				background-color: #E0FDFF;
				display: none;
			}

			.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: 60px;
			}

			.name {
				width: 100%;
				height: 30px;
				line-height: 30px;
				display: flex;
				justify-content: space-around;
			}

			.price {
				width: 100%;
				height: 1150px;
			}
		</style>

JS数据

// let声明变量data总数据
let data;
// 创建新的 XMLHttpRequest(可扩展超文本传输请求) 对象
let xhr = new XMLHttpRequest();
// 使用 open 方法指定要请求的地址、类型和方式
xhr.open('get', 'js/index.json', true);
// 发送数据
xhr.send();
// 绑定 onreadystatechange（定义响应执行函数） 事件，判断 readyState 和 status 的状态
xhr.onreadystatechange = function() {
	if (xhr.readyState == 4 && xhr.status == 200) {
		// 响应文本（返回的数据）
		let text = xhr.responseText;
		console.log(text);
		// 接收数据，通过 json 转换使用 把json数据转化为数据或对象
		data = JSON.parse(text);
		console.log(data);
		// 渲染函数
		list(data);
	}
};

// 拼接
// let声明变量为j j是设置的一级 二级
let j = 1;
// 渲染函数
function list(data) {
	// let声明str为空字符串
	let str = '';
	// 遍历数组
	for (let i = 0; i < data.length; i++) {
		// 判断当状态为j时 拼接框架
		if (data[i].state == j) {
			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">`;
			// 判断等级 使用三元表达式 当等级为1时 是会员 等级为2时 是VIP 等级为3时 是合伙人
			str += `<div class="first_row">${data[i].class == 1?`会员`:data[i].class == 2?`VIP`:`合伙人`}</div>`;
			str += `
							<div class="second_row">邀请人：${data[i].inviter}</div>
						</div>
					</div>
					<div class="line"></div>`;
		};
	};
	// 渲染数据
	document.getElementsByClassName('price')[0].innerHTML = str;
};
// 状态1 点击事件
// 获取下面的跟着状态移动的线
let change = document.getElementsByClassName("change")[0];
function first_level() {
	// 线距离左边距30% 加一个过渡效果
	change.style.marginLeft = "33%";
	change.style.transition = "all 1s";
	j = 1;
	// 渲染数据
	list(data);
};
// 状态2 点击事件
function second_level() {
	// 线距离左边距130% 加一个过渡效果
	change.style.marginLeft = "133%";
	change.style.transition = "all 1s";
	j = 2;
	// 渲染数据
	list(data);
};

// 本月累计 
// 给本月累计添加点击事件 获取所有交易量的数据
// if判断 点击的次数为奇数时 交易量从小到大排列 点击的次数为偶数时 交易量从大到小排列 
// 使用冒泡排序对数值进行排序
// 按照交易量排序 点击一下奇数 从小到大 点两下为偶数 从大到小

// 本月累积的点击事件
// let声明变量a初始值为1 a是点击数据的奇偶 点1下是从小到大排列 点两下是从大到小排列
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;
				};
			};
		};
		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 (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;
				};
			};
		};
		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);
};