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

JS实现团队功能

2023-11-16 25
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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功能
风与烈酒
目录
相关文章
小z前端笔记
|
20小时前
|
JSON 缓存 前端开发
JavaScript 新特性：新增声明命令与解构赋值的强大功能
JavaScript 新特性：新增声明命令与解构赋值的强大功能
小z前端笔记
7 1
67vpym2vvkfhs
|
3天前
|
SQL Web App开发 JavaScript
业务功能常用的JS代码片段
业务功能常用的JS代码片段
67vpym2vvkfhs
11 3
龙大吉
|
10天前
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架，它们各自拥有独特的核心功能和使用场景
【6月更文挑战第16天】Phaser是开源的2D游戏引擎，适合HTML5游戏，提供物理引擎、图像渲染和资源管理，适用于2D游戏，如消消乐。Three.js是基于WebGL的3D库，用于创建复杂的3D场景和应用，涵盖从游戏到可视化领域的多种用途。两者分别在2D和3D开发中展现强大功能，选择取决于项目需求。
龙大吉
21 8
茶卡盐佑星_
|
12天前
|
JavaScript 前端开发
JS导出excel功能
JS导出excel功能
茶卡盐佑星_
19 2
茶卡盐佑星_
|
12天前
|
JavaScript Serverless
JS实现递归功能
JS实现递归功能
茶卡盐佑星_
14 2
茶卡盐佑星_
|
12天前
|
JavaScript
JS实现分页功能
JS实现分页功能
茶卡盐佑星_
13 2
她说她一如既往的爱我
|
20天前
|
JavaScript 前端开发
js实现复制功能
js实现复制功能
她说她一如既往的爱我
19 4
刻刻帝的海角
|
21天前
|
JavaScript Shell
Vue.js功能实现博客
Vue.js功能实现博客
刻刻帝的海角
14 2
小z前端笔记
|
20小时前
|
前端开发 JavaScript 安全
解锁 JavaScript ES6：函数与对象的高级扩展功能
解锁 JavaScript ES6：函数与对象的高级扩展功能
小z前端笔记
6 0
小鼠米奇
|
4天前
|
JavaScript 安全 前端开发
JS实现复制功能
JS实现复制功能
小鼠米奇
5 0

热门文章

最新文章

  • 1
    Js cdn 学习
  • 2
    巧用apply让javascript函数仅执行一次
  • 3
    js简单操作Cookie
  • 4
    JavaScript：window窗口对象
  • 5
    JavaScript 浮点数及运算精度调整总结
  • 6
    JavaScript奇味探索
  • 7
    常用javascript表单验证方法
  • 8
    通过 File API 使用 JavaScript 读取文件
  • 9
    显示缩略列表 JS DOM
  • 10
    JavaScript网站设计实践（六）编写live.html页面 改进表格显示
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    162
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    34
  • 3
    描述 JavaScript 中的垃圾回收机制。
    31
  • 4
    如何使用 JavaScript 操作 DOM？
    25
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    28
  • 6
    JavaScript 中的数组方法有哪些？
    24
  • 7
    JS设置日期为0时0分0秒
    75
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    37
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    37
  • 10
    深入理解JavaScript中的闭包与作用域链
    14

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • 前端自动化构建工具 Webpack
  • Node.js 入门教程文档

    • 相关电子书

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

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）