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); };
