AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

js团队筛选功能

2024-08-23 22
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>
文章标签：
JavaScript
关键词：
JavaScript功能
JavaScript筛选
JavaScript团队功能
JavaScript团队
lvbb66
目录
相关文章
游客dng4gjyb342he
|
1天前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
游客dng4gjyb342he
29 20
哈你真皮
|
24天前
|
JavaScript 前端开发 容器
jQuery多功能滑块插件r-slider.js
r-slider.js是一款jQuery多功能滑块插件。使用该插件，可以制作出滑块、开关按钮、进度条、向导步骤等多种效果。
哈你真皮
31 5
疯狂的猿
|
1月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能，界面简洁实用，是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
疯狂的猿
24 2
想飞的雪糕
|
2月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成（三完）：利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互，包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类，提供了与 AD 服务器通信的完整解决方案，同时解决了中文字段在 LDAP 操作中被转义的问题。
想飞的雪糕
62 1
神明木佑
|
2月前
|
前端开发 JavaScript
JS-数据筛选
JS-数据筛选
神明木佑
35 7
mao29955
|
2月前
|
JavaScript 前端开发 API
除了 Vue.js，还有哪些框架可以实现全屏显示功能？
【10月更文挑战第7天】
mao29955
37 1
mao29955
|
2月前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
mao29955
45 1
代码bug生产队
|
2月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
代码bug生产队
75 4
Li370234940
|
2月前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
Li370234940
38 1
神明木佑
|
2月前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
神明木佑
46 0

热门文章

最新文章

  • 1
    JavaScript右下角信息提示插件Notyf
  • 2
    《JavaScript框架设计》——1.4　类型的判定
  • 3
    测试驱动javascript开发 -- 3.测试驱动开发过程（上）
  • 4
    Nightwatch.js – 轻松实现浏览器的自动测试
  • 5
    node.js入门学习
  • 6
    JS的正则表达式1
  • 7
    前端 时间个性化 插件 jquery.timeago.js
  • 8
    JavaScript链式结构序列化详解
  • 9
    javascript从定义到执行 你应知这些事
  • 10
    为什么 JavaScript 会在移动端中胜出？
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    54
  • 2
    js设计模式-观察者模式与发布/订阅模式
    72
  • 3
    js设计模式-策略模式与代理模式的应用
    72
  • 4
    深入理解JavaScript中的闭包机制
    60
  • 5
    使用Vue.js构建交互式前端的技术探索
    89
  • 6
    使用Node.js构建实时聊天应用的技术指南
    132
  • 7
    深入理解JavaScript中的事件循环机制
    89
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    121
  • 9
    JavaScript 数组方法概览
    38
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    67

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • ROS模板参数动态展示
    • 下一篇
    DataWorks