Hello 大家好 今天给大家分享一下如何用JS实现团队功能的效果
如图：
点击交易额还是会有一个自动排序的效果 我设置的是从上往下为数字由大到小排序 所以会显示交易量由600-110的效果：
首先显示html页面：
<div class="title"> <h1 onclick="renders()">一级</h1> <h1 onclick="newpages()">二级</h1> </div> <div class="title_two"> <span onclick="transaction()">交易额</span> <span onclick="people()">开团</span> <span onclick="title_two_level()" id="level_click">等级</span> </div> <div class="select" id="select_block"> <div onclick="golden_card()">金卡</div> <div onclick="silver_card()">银卡</div> <div onclick="copper_card()">铜卡</div> </div> <div id="level_one"></div>
接下来是css样式：
* { margin: 0; padding: 0; } .title { width: 80%; margin: 10%; display: flex; justify-content: space-around; } .title_two { width: 80%; margin: 0 10%; font-size: 20px; display: flex; justify-content: space-around; } .content { width: 80%; margin: 10%; display: flex; justify-content: space-between; text-align: center; } #level_one { width: 100%; } .select { width: 15%; background-color: aliceblue; text-align: center; position: absolute; left: 70%; display: none; } .select div { line-height: 50px; }
接下来就是最重要的js 内容了
首先我们要知道的是县区实现哪些功能 有一个点击'交易额‘ 对应的交易数量就会自动排序 同理 点击开团人数的话对应的开团人数也是会排序
选创建初始数据
let data = [{ name: '如花的亲亲', levle: '银卡', num: 395, people_num: 600 }, { name: '如花的鼻噶', levle: '铜卡', num: 310, people_num: 1000 }, { name: '如花的爱抚', levle: '铜卡', num: 600, people_num: 960 }, { name: '如花的舌吻', levle: '金卡', num: 110, people_num: 640 }, { name: '如花的拍打', levle: '银卡', num: 250, people_num: 500 }, ] let data_two = [{ name: '康子的亲亲', levle: '银卡', num: 395, people_num: 600 }, { name: '翔子的鼻噶', levle: '铜卡', num: 310, people_num: 1000 }, { name: '乐子的爱抚', levle: '铜卡', num: 600, people_num: 960 }, { name: '厚厚的舌吻', levle: '金卡', num: 110, people_num: 640 }, { name: '铭铭的拍打', levle: '银卡', num: 250, people_num: 500 }, ]
渲染页面:
let status = 0; renders() function renders() { select_block.style.display = 'none'; status = 0; let str = ''; for (let i = 0; i < data.length; i++) { str += `<div class="content"> <div> <div>${data[i].name}</div> <div>交易量：${data[i].num}</div> </div> <div> <div>${data[i].levle}</div> <div>开团人数：${data[i].people_num}</div> </div> </div>` } document.getElementById('level_one').innerHTML = str; }
交易额点击事件 点击开始排序:
function transaction() { if (status == 0) { data.sort(function(a, b) { return b.num - a.num; }) renders() } else { data_two.sort(function(a, b) { return b.num - a.num; }) newpages() } }
开团点击事件 点击开始排序:
function people() { if (status == 0) { data.sort(function(a, b) { return b.people_num - a.people_num; }) renders() } else { data_two.sort(function(a, b) { return b.people_num - a.people_num; }) newpages() } }
金 银 铜卡的渲染事件
function title_two_level() { let select_block = document.getElementById('select_block'); if (select_block.style.display == 'block') { select_block.style.display = 'none'; } else { select_block.style.display = 'block'; } } function golden_card() { let str = ''; if (status == 0) { for (let i = 0; i < data.length; i++) { if (data[i].levle == '金卡') { str += `<div class="content"> <div> <div>${data[i].name}</div> <div>交易量：${data[i].num}</div> </div> <div> <div>${data[i].levle}</div> <div>开团人数：${data[i].people_num}</div> </div> </div>` } } document.getElementById('level_one').innerHTML = str; } else { for (let i = 0; i < data_two.length; i++) { if (data_two[i].levle == '金卡') { str += `<div class="content"> <div> <div>${data_two[i].name}</div> <div>交易量：${data_two[i].num}</div> </div> <div> <div>${data_two[i].levle}</div> <div>开团人数：${data_two[i].people_num}</div> </div> </div>` } } document.getElementById('level_one').innerHTML = str; } } function silver_card() { let str = ''; if (status == 0) { for (let i = 0; i < data.length; i++) { if (data[i].levle == '银卡') { str += `<div class="content"> <div> <div>${data[i].name}</div> <div>交易量：${data[i].num}</div> </div> <div> <div>${data[i].levle}</div> <div>开团人数：${data[i].people_num}</div> </div> </div>` } } document.getElementById('level_one').innerHTML = str; } else { for (let i = 0; i < data_two.length; i++) { if (data_two[i].levle == '银卡') { str += `<div class="content"> <div> <div>${data_two[i].name}</div> <div>交易量：${data_two[i].num}</div> </div> <div> <div>${data_two[i].levle}</div> <div>开团人数：${data_two[i].people_num}</div> </div> </div>` } } document.getElementById('level_one').innerHTML = str; } } function copper_card() { let str = ''; if (status == 0) { for (let i = 0; i < data.length; i++) { if (data[i].levle == '铜卡') { str += `<div class="content"> <div> <div>${data[i].name}</div> <div>交易量：${data[i].num}</div> </div> <div> <div>${data[i].levle}</div> <div>开团人数：${data[i].people_num}</div> </div> </div>` } } document.getElementById('level_one').innerHTML = str; } else { for (let i = 0; i < data_two.length; i++) { if (data_two[i].levle == '铜卡') { str += `<div class="content"> <div> <div>${data_two[i].name}</div> <div>交易量：${data_two[i].num}</div> </div> <div> <div>${data_two[i].levle}</div> <div>开团人数：${data_two[i].people_num}</div> </div> </div>` } } document.getElementById('level_one').innerHTML = str; } }
因为有一级和二级存在 虽有要设置好判断 如果status==1的时候 使用新函数渲染
function newpages() { status = 1; let str = ''; select_block.style.display = 'none'; for (let i = 0; i < data_two.length; i++) { str += `<div class="content"> <div> <div>${data_two[i].name}</div> <div>交易量：${data_two[i].num}</div> </div> <div> <div>${data_two[i].levle}</div> <div>开团人数：${data_two[i].people_num}</div> </div> </div>` } document.getElementById('level_one').innerHTML = str; }
