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

JS实现团队功能

2023-11-16 46
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS实现团队功能

团队功能里面分为一级、二级，每级包含交易额、会员数、等级，交易额又包含为本月累计，会员数包含会员的数量，等级包含会员、VIP、合伙人。

这是样式给大家展示出来：

CSS：
<style>
      * {
        margin: 0;
        padding: 0;
      }
      #dengji {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 30px;
        font-size: 20px;
        margin-top: 20px;
      }
      #jiaoyi {
        font-size: 20px;
        display: flex;
        justify-content: space-around;
        margin-top: 20px;
      }
      #mingcheng {
        margin-top: 20px;
        font-size: 20px;
        display: flex;
        justify-content: space-around;
      }
      #benyue {
        font-size: 20px;
        margin-left: 40px;
      }
      #huiyuan {
        font-size: 20px;
        margin-left: 45.5%;
      }
      #san {
        font-size: 20px;
        margin-left: 80%;
      }
    </style>
HTML：
<div id="dengji">
      <div id="dengji_d" onclick="yiji_y()">一级</div>
      <div id="dengji_e" onclick="erji_e()">二级</div>
    </div>
    <!-- 交易 -->
    <div id="jiaoyi">
      <div onclick="jiaoyi_j()">交易额</div>
      <div onclick="huiyuan_u()">会员数</div>
      <div onclick="dengji()">等级</div>
    </div>
    <div id="benyue" style="display: none;" onclick="benyue_b()">本月累计</div>
    <div id="huiyuan" style="display: none;" onclick="huiyuan_h()">会员数</div>
    <div id="san">
      <div id="hui" style="display: none;" onclick="hui_h()">会员</div>
      <div id="vip" style="display: none;" onclick="vip_v()">VIP</div>
      <div id="hehuoren" style="display: none;" onclick="hehuoren_h()">合伙人</div>
    </div>
    <!-- 一级 -->
    <div id="yiji">
    </div>
JS：
<script>
      let data = [{
        id: 1,
        name: "孙悟空",
        partner: "合伙人",
        volume: 333,
        inviter: 4
      }, {
        id: 1,
        name: "猪八戒",
        partner: "VIP",
        volume: 427,
        inviter: 5
      }, {
        id: 1,
        name: "沙僧",
        partner: "会员",
        volume: 123,
        inviter: 9
      }, {
        id: 1,
        name: "白龙马",
        partner: "会员",
        volume: 73,
        inviter: 10
      }, {
        id: 2,
        name: "菩提老祖",
        partner: "合伙人",
        volume: 333,
        inviter: 44
      }, {
        id: 2,
        name: "如来佛祖",
        partner: "VIP",
        volume: 427,
        inviter: 43
      }, {
        id: 2,
        name: "观音菩萨",
        partner: "会员",
        volume: 123,
        inviter: 22
      }, {
        id: 2,
        name: "六耳猕猴",
        partner: "会员",
        volume: 73,
        inviter: 11
      }]
      // 执行渲染
      let t = 1;
      // 创建渲染函数
      function xuanran() {
        let arr = "";
        for (let i = 0; i < data.length; i++) {
          if (t == 1 && data[i].id == 1) {
            arr += `<div id="mingcheng">
              <div id="mingcheng_m">
                <span>${data[i].name}</span>
                <p>${data[i].partner}</p>
              </div>
              <div id="mingcheng_i">
                <span>交易量：${data[i].volume}</span>
                <p>邀请人：${data[i].inviter}</p>
              </div>
            </div>`;
          } else if (t == 2 && data[i].id == 2) {
            arr += `<div id="mingcheng">
              <div id="mingcheng_m">
                <span>${data[i].name}</span>
                <p>${data[i].partner}</p>
            </div>
              <div id="mingcheng_i">
                <span>交易量：${data[i].volume}</span>
                <p>邀请人：${data[i].inviter}</p>
              </div>
            </div>`;
          }
          document.getElementById("yiji").innerHTML = arr;
        }
      }
      xuanran()
      function yiji_y() {
        t = 1;
        xuanran();
      }
      function erji_e() {
        t = 2;
        xuanran();
      }
      // 点击交易额显示本月累计
      function jiaoyi_j() {
        document.getElementById("benyue").style.display = "block";
      }
      // 点击本月累计消失本月累计
      function benyue_b() {
        document.getElementById("benyue").style.display = "none";
        for (let i = 0; i < data.length - 1; i++) {
          for (let j = 0; j < data.length - 1 - i; j++) {
            if (data[j].volume < data[j + 1].volume) {
              let num = data[j];
              data[j] = data[j + 1];
              data[j + 1] = num;
            }
          }
        }
        xuanran();
      }
      // 点击会员数显示会员并且排序
      function huiyuan_u() {
        document.getElementById("huiyuan").style.display = "block";
      }
      // 点击会员数消失会员数并且排序
      function huiyuan_h() {
        document.getElementById("huiyuan").style.display = "none";
        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;
            }
          }
        }
        xuanran();
      }
      // 点击等级显示:会员,VIP,合伙人
      function dengji() {
        document.getElementById("hui").style.display = "block";
        document.getElementById("vip").style.display = "block";
        document.getElementById("hehuoren").style.display = "block";
      }
      // 筛选会员
      function hui_h() {
        document.getElementById("hui").style.display = "none";
        document.getElementById("hehuoren").style.display = "none";
        document.getElementById("vip").style.display = "none";
        let arr = "";
        for (let i = 0; i < data.length; i++) {
          if (t == 1 && data[i].partner == "会员" && data[i].id == 1) {
            arr += `<div id="mingcheng">
              <div id="mingcheng_m">
                <span>${data[i].name}</span>
                <p>${data[i].partner}</p>
              </div>
              <div id="mingcheng_i">
                <span>交易量：${data[i].volume}</span>
                <p>邀请人：${data[i].inviter}</p>
              </div>
            </div>`;
          } else if (t == 2 && data[i].partner == "会员" && data[i].id == 2) {
            arr += `<div id="mingcheng">
              <div id="mingcheng_m">
                <span>${data[i].name}</span>
                <p>${data[i].partner}</p>
            </div>
              <div id="mingcheng_i">
                <span>交易量：${data[i].volume}</span>
                <p>邀请人：${data[i].inviter}</p>
              </div>
            </div>`;
          }
          document.getElementById("yiji").innerHTML = arr;
        }
      }
      // 筛选VIP
      function vip_v() {
        document.getElementById("vip").style.display = "none";
        document.getElementById("hui").style.display = "none";
        document.getElementById("hehuoren").style.display = "none";
        let arr = "";
        for (let i = 0; i < data.length; i++) {
          if (t == 1 && data[i].partner == "VIP" && data[i].id == 1) {
            arr += `<div id="mingcheng">
              <div id="mingcheng_m">
                <span>${data[i].name}</span>
                <p>${data[i].partner}</p>
              </div>
              <div id="mingcheng_i">
                <span>交易量：${data[i].volume}</span>
                <p>邀请人：${data[i].inviter}</p>
              </div>
            </div>`;
          } else if (t == 2 && data[i].partner == "VIP" && data[i].id == 2) {
            arr += `<div id="mingcheng">
              <div id="mingcheng_m">
                <span>${data[i].name}</span>
                <p>${data[i].partner}</p>
            </div>
              <div id="mingcheng_i">
                <span>交易量：${data[i].volume}</span>
                <p>邀请人：${data[i].inviter}</p>
              </div>
            </div>`;
          }
          document.getElementById("yiji").innerHTML = arr;
        }
      }
      // 筛选合伙人
      function hehuoren_h() {
        document.getElementById("vip").style.display = "none";
        document.getElementById("hui").style.display = "none";
        document.getElementById("hehuoren").style.display = "none";
        let arr = "";
        for (let i = 0; i < data.length; i++) {
          if (t == 1 && data[i].partner == "合伙人" && data[i].id == 1) {
            arr += `<div id="mingcheng">
              <div id="mingcheng_m">
                <span>${data[i].name}</span>
                <p>${data[i].partner}</p>
              </div>
              <div id="mingcheng_i">
                <span>交易量：${data[i].volume}</span>
                <p>邀请人：${data[i].inviter}</p>
              </div>
            </div>`;
          } else if (t == 2 && data[i].partner == "合伙人" && data[i].id == 2) {
            arr += `<div id="mingcheng">
              <div id="mingcheng_m">
                <span>${data[i].name}</span>
                <p>${data[i].partner}</p>
            </div>
              <div id="mingcheng_i">
                <span>交易量：${data[i].volume}</span>
                <p>邀请人：${data[i].inviter}</p>
              </div>
            </div>`;
          }
          document.getElementById("yiji").innerHTML = arr;
        }
      }
    </script>
文章标签：
JavaScript
前端开发
关键词：
JavaScript功能
JavaScript团队功能
JavaScript团队
风与烈酒
目录
相关文章
派大鑫的工作室
|
1月前
|
JavaScript 前端开发
JavaScript分页功能
JavaScript分页功能
派大鑫的工作室
30 0
疯狂的猿
|
18天前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能，界面简洁实用，是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
疯狂的猿
24 2
想飞的雪糕
|
1月前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成（三完）：利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互，包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类，提供了与 AD 服务器通信的完整解决方案，同时解决了中文字段在 LDAP 操作中被转义的问题。
想飞的雪糕
41 1
mao29955
|
1月前
|
JavaScript 前端开发 API
除了 Vue.js，还有哪些框架可以实现全屏显示功能？
【10月更文挑战第7天】
mao29955
24 1
mao29955
|
1月前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
mao29955
22 1
代码bug生产队
|
1月前
|
资源调度 JavaScript UED
如何使用Vue.js实现单页应用的路由功能
【10月更文挑战第1天】如何使用Vue.js实现单页应用的路由功能
代码bug生产队
64 4
Li370234940
|
1月前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
Li370234940
29 1
神明木佑
|
1月前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
神明木佑
29 0
Li370234940
|
1月前
|
JavaScript 安全 前端开发
js实现复制功能
js实现复制功能
Li370234940
19 0
游客qeoynko2nmbgk
|
2月前
用html+javascript打造公文一键排版系统14：为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
用html+javascript打造公文一键排版系统14：为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
游客qeoynko2nmbgk
37 0

热门文章

最新文章

  • 1
    Node.js使用jsrsasign实现SHA256withRSA加密算法
  • 2
    JS代码位置
  • 3
    js/Jquery 对像不存在或为空的原因
  • 4
    js: 删除node的所有child
  • 5
    【javascript】Promise/A+ 规范简单实现 异步流程控制思想
  • 6
    js正则表达式语法
  • 7
    JavaScript 技术篇-js获取dom节点、html标签自定义属性的值。
  • 8
    【转】Javascript关键字和保留字
  • 9
    JS中遍历语法的比较
  • 10
    Node.js 中流操作实践
  • 1
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    105
  • 2
    JavaScript 数组方法概览
    36
  • 3
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    57
  • 4
    JavaScript 的数组方法 map()、filter() 和 reduce() 提供了函数式编程处理元素的方式
    46
  • 5
    JavaScript 提供了多种方法来操作 DOM（文档对象模型）
    47
  • 6
    JavaScript的垃圾回收机制通过标记-清除算法自动管理内存
    56
  • 7
    JavaScript 的垃圾回收机制有一些潜在的缺点
    40
  • 8
    nbcio-vue下载安装后运行报错，diagram-js没有安装
    57
  • 9
    了解JavaScript的垃圾回收机制
    39
  • 10
    uni-app和Vue.js二者之间有什么区别？
    64

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Node.js 入门教程文档
  • 前端开发CSS基础

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础1：前端开发环境的安装和配置
  • 搭建Node.js编程环境
    • 下一篇
    无影云桌面