js团队筛选功能-阿里云开发者社区

[{
  "name": "乐多",
  "total": "342",
  "class":2,
  "inviter": 6,
  "state": 2
}, {
  "name": "灰灰的",
  "total": "900",
  "class":3,
  "inviter": 4,
  "state": 1
}, {
  "name": "聂聂脸",
  "total": "223",
  "class":3,
  "inviter": 2,
  "state": 2
}, {
  "name": "acc",
  "total": "343",
  "class":2,
  "inviter": 4,
  "state": 1
}, {
  "name": "每天都想吃好吃的（见过刘巍版",
  "total": "532",
  "class":3,
  "inviter": 4,
  "state": 1
}, {
  "name": "别重复",
  "total": "453",
  "class":1,
  "inviter": 6,
  "state": 2
}, {
  "name": "南山",
  "total": "340",
  "class":1,
  "inviter": 3,
  "state": 1
}, {
  "name": "郭包肉",
  "total": "360",
  "class":2,
  "inviter": 2,
  "state": 2
  }, {
    "name": "一个芒果",
    "total": "1220",
    "class":3,
    "inviter": 9,
    "state": 1
}]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
 
      .page {
        width: 100%;
        height: 160px;
        margin-bottom: 20px;
      }
 
      .page_black {
        width: 100%;
        height: 312px;
        background-color: #000000;
      }
 
      .page_blacks {
        width: 100%;
        height: 233px;
        background-color: #000000;
        border-radius: 50%;
        margin-top: -115px;
      }
 
      .page_orange {
        width: 92%;
        height: 450px;
        background-color: rgba(251, 219, 194, 0.8);
        margin-top: -350px;
        margin-left: 4%;
        border-radius: 25px;
      }
 
      .years {
        width: 100%;
        height: 50px;
        font-size: 40px;
        text-align: center;
        line-height: 300px;
      }
 
      .zero {
        width: 100%;
        font-size: 40px;
        text-align: center;
        line-height: 350px;
      }
 
      .lines {
        width: 100%;
        height: 0.5px;
        background-color: #686363;
        margin-top: 450px;
      }
 
      .line {
        width: 100%;
        height: 0.5px;
        background-color: #000000;
      }
 
      .linet {
        width: 100%;
        height: 0.5px;
        background-color: #000000;
      }
 
      .tier {
        width: 100%;
        height: 85px;
        display: flex;
 
      }
 
      .first {
        width: 40%;
        margin-left: 10%;
        text-align: center;
        font-size: 40px;
        line-height: 90px;
        z-index: 21;
      }
 
      .second {
        width: 40%;
        text-align: center;
        font-size: 40px;
        line-height: 90px;
      }
 
      .change {
        width: 36%;
        height: 2px;
        margin-left: 27%;
        margin-top: -6px;
        background-color: #552822
      }
 
      .sum {
        width: 100%;
        height: 85px;
        display: flex;
        justify-content: space-around;
 
      }
 
      .sum_text {
        width: 25%;
        text-align: center;
        font-size: 40px;
        line-height: 80px;
        z-index: 20;
      }
 
      .text_year {
        width: 186px;
        height: 53px;
        line-height: 45px;
        background-color: #E0FDFF;
        display: none;
        margin-left: 12%;
      }
 
      .sum_text:hover .text_year {
        display: block;
      }
 
      .sum_vip {
        width: 25%;
        text-align: center;
        font-size: 40px;
        line-height: 80px;
        z-index: 20;
      }
 
      .text_vip {
        width: 130px;
        height: 50px;
        line-height: 50px;
        background-color: #E0FDFF;
        display: none;
        margin-left: 24%;
      }
 
      .sum_vip:hover .text_vip {
        display: block;
      }
 
 
      .sum_class {
        width: 25%;
        text-align: center;
        font-size: 40px;
        line-height: 80px;
        z-index: 20;
      }
 
      .text_class {
        width: 160px;
        height: 45px;
        line-height: 40px;
        background-color: #E0FDFF;
        display: none;
        margin-left: 15%;
      }
 
      .text_member {
        width: 160px;
        height: 46px;
        line-height: 42px;
        background-color: #E0FDFF;
        display: none;
        margin-left: 15%;
      }
 
      .text_partner {
        width: 160px;
        height: 60px;
        line-height: 60px;
        background-color: #E0FDFF;
        display: none;
        margin-left: 15%;
      }
 
      .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: 160px;
      }
 
      .name {
        width: 100%;
        height: 65px;
        line-height: 100px;
        display: flex;
        justify-content: space-around;
        font-size: 40px;
      }
 
      .price {
        width: 100%;
        height: 1150px;
      }
    </style>
  </head>
  <body>
    <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="linet"></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>
 
    <script>
      // 声明一个变量 data 用于存储从服务器获取的 JSON 数据
      let data;
      // 创建 XMLHttpRequest 对象
      let xhr = new XMLHttpRequest();
      // 使用 open 方法指定要请求的地址、类型和方式
      xhr.open('get', 'js/team.json', true);
      // 发送请求
      xhr.send();
      // 绑定 onreadystatechange 事件处理函数，处理响应的状态变化
      xhr.onreadystatechange = function() {
        // 当请求完成并且响应状态为成功时（状态码 200）
        if (xhr.readyState == 4 && xhr.status == 200) {
          // 获取响应文本
          let text = xhr.responseText;
          console.log(text);
          // 将响应文本解析为 JSON 对象
          data = JSON.parse(text);
          console.log(data);
          // 调用列表渲染函数
          list(data);
        }
      };
 
      // 初始化状态 j
      let j = 1;
 
      // 渲染函数，根据状态 j 过滤数据并生成 HTML 内容
      function list(data) {
        let str = '';
        // 遍历数据数组
        for (let i = 0; i < data.length; i++) {
          // 根据状态 j 过滤数据
          if (data[i].state == j) {
            // 拼接 HTML 字符串
            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">
                                    <div class="first_row">${data[i].class == 1 ? `会员` : data[i].class == 2 ? `VIP` : `合伙人`}</div>
                                    <div class="second_row">邀请人：${data[i].inviter}</div>
                                </div>
                            </div>
                            <div class="line"></div>`;
          }
        }
        // 将生成的 HTML 内容渲染到页面中
        document.getElementsByClassName('price')[0].innerHTML = str;
      }
 
      // 状态切换点击事件处理函数
      let change = document.getElementsByClassName("change")[0];
 
      // 第一级状态点击事件
      function first_level() {
        change.style.marginLeft = "33%";
        change.style.transition = "all 1s";
        j = 1;
        list(data); // 更新数据
      }
 
      // 第二级状态点击事件
      function second_level() {
        change.style.marginLeft = "133%";
        change.style.transition = "all 1s";
        j = 2;
        list(data); // 更新数据
      }
 
      // 本月累计交易量点击事件处理函数
      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;
              }
            }
          }
        } 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;
              }
            }
          }
        } 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); // 更新数据
      };
      // 按照邀请人数排序 点击一下奇数 从小到大 点两下为偶数 从大到小
      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);
      };
    </script>
  </body>
</html>

js团队筛选功能

热门文章

最新文章

相关课程

相关电子书

相关实验场景