我们来看一下页面效果是什么，请看下图！
功能需求 ：
- 点击交易额，会员数，等级会显示一个框
- 框内：交易额（本月积累），会员数（会员数），等级（会员，VIP，合伙人）
- 点击本月积累后数据会从大到小依次排列
- 点击会员数里的会员数邀请人从大到小排列
- 点击等级内任意的文字，那么就会显示所对应的（会员，VIP，合伙人）
- 点击一级会显示一级的数据
- 点击二级会显示二级的数据
HTML代码
<body> <!-- 一级 --> <div class="head"> <p onclick="once()">一级</p> <p onclick="twin()">二级</p> </div> <div class="body_one"> <div class="one"></div> <!-- 交易额 --> <div class="head_one"> <div class="first"> <p onclick="fart()">交易额</p> <div class="first_one" id="fart_one"> <span id="faru" onclick="mouth()">本月积累</span> </div> </div> <!-- 会员 --> <div class="second"> <p onclick="fart_one()">会员数</p> <div class="second_one"> <span onclick="number()" id="fary">会员数</span> </div> </div> <!-- 等级 --> <div class="three"> <p onclick="fart_two()">等级</p> <div class="three_one" id="farti"> <p id="huiyuan" onclick="member()">会员</p> <p id="vip" onclick="vipers()">VIP</p> <p id="hehuoren" onclick="men()">合伙人</p> </div> </div> </div> <div class="one"></div> <!-- 渲染过的数据 --> <div class="content"></div> </div> <script src="js/团队功能制作.js"></script> </body>
CSS代码
* { margin: 0; padding: 0; } .body_one { width: 100%; height: 350px; } .head { width: 100; height: 50px; display: flex; padding-top: 20px; justify-content: space-around; } .head p { font-size: 20px; font-family: 宋体; } .one { width: 96%; height: 1px; margin-left: 2%; background-color: darkgray; } .head_one { width: 100; height: 30px; display: flex; margin-top: 10px; font-family: 宋体; justify-content: space-around; } .first_one{ width: 100%; height: 20px; display: none; } #faru{ background-color: lavenderblush; } .second_one{ width: 100%; background-color: lavenderblush; display: none; } .three{ position: relative; width: 15%; } .three_one{ width: 100%; background-color: lavenderblush; display: none; position: absolute; } .head_two{ display: none; margin-top: 10px; display: flex; height: 50px; font-family: 宋体; justify-content: space-around; }
JS代码
我写的JS代码很多 并不简便 但大概的功能需求也是实现了的 但是请不要向我学习！！！
data的两组不同的数据我给它加了one也相当于是id，但是给的数字不一样，数字1时是人名，数字2时是喜羊羊，以此来区分获取数据！
// let一个状态 let con = false; // 假数据 let data = [{ "one": 1, "name": "漓", "class": "VIP", "num": 1000, "people": 100, }, { "one": 1, "name": "曲辒净", "class": "会员", "num": 3000, "people": 300, }, { "one": 1, "name": "Meng", "class": "VIP", "num": 1900, "people": 90, }, { "one": 1, "name": "忍者神柯", "class": "会员", "num": 2000, "people": 200, }, { "one": 1, "name": "西施", "class": "合伙人", "num": 1000, "people": 100, }, { "one": 2, "name": "喜羊羊", "class": "合伙人", "num": 520, "people": 52, }, { "one": 2, "name": "美羊羊", "class": "会员", "num": 1314, "people": 600, }, { "one": 2, "name": "懒羊羊", "class": "VIP", "num": 888, "people": 88, }, { "one": 2, "name": "暖羊羊", "class": "合伙人", "num": 3333, "people": 333, }, ] let a = 1; // 渲染函数（使用判断将写的两个渲染函数合并一起，给数据设专属，one为1时选择数据人名为2时选择羊） function rander() { let str = ""; for (let i = 0; i < data.length; i++) { if (a == 1 && data[i].one == 1) { str += `<div class="head_two"> <div class="head_two_one"> <p>${data[i].name}</p> <p>${data[i].class}</p> </div> <div class="head_two_two"> <p>交易量：${data[i].num}</p> <p>邀请人：${data[i].people}</p> </div> </div> <div class="one"></div>`; } else if (a == 2 && data[i].one == 2) { str += `<div class="head_two"> <div class="head_two_one"> <p>${data[i].name}</p> <p>${data[i].class}</p> </div> <div class="head_two_two"> <p>交易量：${data[i].num}</p> <p>邀请人：${data[i].people}</p> </div> </div> <div class="one"></div>`; } } // 渲染的内容书写到str中 document.getElementsByClassName('content')[0].innerHTML = str; } rander(); // 获取点击等级里的三个小内容 let huiyuan = document.getElementById('huiyuan'); let vip = document.getElementById('vip'); let hehuoren = document.getElementById('hehuoren'); // 只显示等级里的会员 function member() { huiyuan.style.display = "none"; vip.style.display = "none"; hehuoren.style.display = "none"; let arr = ""; for (let i = 0; i < data.length; i++) { if (a == 1 & data[i].class == "会员" && data[i].one == 1) { arr += `<div class="head_two"> <div class="head_two_one"> <p>${data[i].name}</p> <p>${data[i].class}</p> </div> <div class="head_two_two"> <p>交易量：${data[i].num}</p> <p>邀请人：${data[i].people}</p> </div> </div> <div class="one"></div>`; } else if (a == 2 && data[i].class == "会员" && data[i].one == 2) { arr += `<div class="head_two"> <div class="head_two_one"> <p>${data[i].name}</p> <p>${data[i].class}</p> </div> <div class="head_two_two"> <p>交易量：${data[i].num}</p> <p>邀请人：${data[i].people}</p> </div> </div> <div class="one"></div>`; } document.getElementsByClassName('content')[0].innerHTML = arr; } } // 只显示等级里的VIP function vipers() { huiyuan.style.display = "none"; vip.style.display = "none"; hehuoren.style.display = "none"; let arr = ""; for (let i = 0; i < data.length; i++) { if (a == 1 & data[i].class == "VIP" && data[i].one == 1) { arr += `<div class="head_two"> <div class="head_two_one"> <p>${data[i].name}</p> <p>${data[i].class}</p> </div> <div class="head_two_two"> <p>交易量：${data[i].num}</p> <p>邀请人：${data[i].people}</p> </div> </div> <div class="one"></div>`; } else if (a == 2 && data[i].class == "VIP" && data[i].one == 2) { arr += `<div class="head_two"> <div class="head_two_one"> <p>${data[i].name}</p> <p>${data[i].class}</p> </div> <div class="head_two_two"> <p>交易量：${data[i].num}</p> <p>邀请人：${data[i].people}</p> </div> </div> <div class="one"></div>`; } document.getElementsByClassName('content')[0].innerHTML = arr; } } // 只显示等级里的合伙人 function men() { huiyuan.style.display = "none"; vip.style.display = "none"; hehuoren.style.display = "none"; let arr = ""; for (let i = 0; i < data.length; i++) { if (a == 1 & data[i].class == "合伙人" && data[i].one == 1) { arr += `<div class="head_two"> <div class="head_two_one"> <p>${data[i].name}</p> <p>${data[i].class}</p> </div> <div class="head_two_two"> <p>交易量：${data[i].num}</p> <p>邀请人：${data[i].people}</p> </div> </div> <div class="one"></div>`; } else if (a == 2 && data[i].class == "合伙人" && data[i].one == 2) { arr += `<div class="head_two"> <div class="head_two_one"> <p>${data[i].name}</p> <p>${data[i].class}</p> </div> <div class="head_two_two"> <p>交易量：${data[i].num}</p> <p>邀请人：${data[i].people}</p> </div> </div> <div class="one"></div>`; } document.getElementsByClassName('content')[0].innerHTML = arr; } } // 标题一级 function once() { a = 1; rander(); // console.log("一级"); } // 标题二级 function twin() { a = 2; rander(); // console.log("二级"); } let faru = document.getElementById('faru'); let fary = document.getElementById('fary'); let farti = document.getElementById('farti'); // 点击交易额显示本月累计 function fart() { faru.style.display = "block"; fary.style.display = "none"; farti.style.display = "none"; con = !con; if (con) { document.getElementById('fart_one').style.display = "block"; } else { document.getElementById('fart_one').style.display = "none"; } } // 会员数隐藏 function fart_one() { faru.style.display = "none"; fary.style.display = "block"; farti.style.display = "none"; faru.style.backgroundColor.display = "none"; con = !con; if (con) { document.getElementsByClassName('second_one')[0].style.display = "block"; } else { document.getElementsByClassName('second_one')[0].style.display = "none"; } } // 会员等级隐藏 function fart_two() { faru.style.display = "none"; fary.style.display = "none"; farti.style.display = "block"; con = !con; if (con) { document.getElementsByClassName('three_one')[0].style.display = "block"; } else { document.getElementsByClassName('three_one')[0].style.display = "none"; } huiyuan.style.display = "block"; vip.style.display = "block"; hehuoren.style.display = "block"; } // 点击本月积累从大到小排序 function mouth() { data.sort(function(a, b) { return b.num - a.num; }) rander(); } // 点击会员数 function number() { data.sort(function(a, b) { return b.people - a.people; }) rander(); }
以上就是我用JS实现团队功能的具体代码跟步骤，每一块代码我觉得都挺详细的，就是不太简便而已,我继续努力。
